XF 2.1 Adjusting the size of the Nav Bar

[Catsmother]

I am making a style and I can't find where to adjust the width of the Navigation bars.
Is there a way of doing this please?

 

[Lawrence]

As this is on line 136 <span class="p-nav-menuText">{{ phrase('menu') }}</span> the <nav class="p-nav"> should be within a few line numbers lower (there is only one of it), and check a few line numbers lower than 382 for this <div class="p-navSticky p-navSticky--primary" data-xf-init="sticky-header">.

 

[Catsmother]

As this is on line 136 <span class="p-nav-menuText">{{ phrase('menu') }}</span> the <nav class="p-nav"> should be within a few line numbers lower (there is only one of it), and check a few line numbers lower than 382 for this <div class="p-navSticky p-navSticky--primary" data-xf-init="sticky-header">.

the code did not work for me.
It was on line 132 and 378 for me.

What could be wrong?

 

[Lawrence]

the code did not work for me.
It was on line 132 and 378 for me.

What could be wrong?

I just looked at your site, everything seems to be working fine at a width of 1200px that you set. The nav sticks and the box-shadow displays as expected, The one thing you need to do is increase .p-sectionLinks-inner's width from 1200px to 1204px so that it matches the width of the navigation tabs bar above it.

What is not working for you?

Edit: add this to .p-nav: background-position: center;, it makes your nav bar background look a lot better, in my opinion,

 

[Catsmother]

I just looked at your site, everything seems to be working fine at a width of 1200px that you set. The nav sticks and the box-shadow displays as expected, The one thing you need to do is increase .p-sectionLinks-inner's width from 1200px to 1204px so that it matches the width of the navigation tabs bar above it.

What is not working for you?

Edit: add this to .p-nav: background-position: center;, it makes your nav bar background look a lot better, in my opinion,

Thanks. where do I go to edit this?

 

[Catsmother]

Appearance -> Styles -> The name of the style you are editing -> Templates -> extra.less

.p-sectionLinks-inner
{
    max-width: 964px;
    margin: 0 auto;
}

.p-nav
{
    max-width: 960px;
    margin: 0 auto;
}

.p-sectionLinks
{
    background: none;
}

.p-sectionLinks-list
{
    background: #f5f5f5;
}

The above works, and !important is not required. The #f5f5f5 color I used is just an example, replace with your own,

To move the box-shadow that covers the width of your forum as you scroll down and the navigation becomes stuck to the new narrower nav bar, you will need to edit the PAGE_CONTAINER template for your style:

At approx. line 136 find <nav class="p-nav"> and replace with <nav class="p-navSticky p-navSticky--primary p-nav" data-xf-init="sticky-header">

Next at approx. line 382 find <div class="p-navSticky p-navSticky--primary" data-xf-init="sticky-header"> and replace with: <div class="p-navSticky">

It is this that doesn't work

 

[Mr Lucky]

There also the issue of the bottom border of subnav which is still full width , plus the breadcrumbs and h1 not to be lighter to contrast with the background.

 

[Lawrence]

Thanks. where do I go to edit this?

That would be done in your styles extra.less file.

I'm still not clear what is not working for you. Do you mean adding the css to extra.less for your style, or editing the PAGE_CONTAINER template for your style?

 

[Catsmother]

That would be done in your styles extra.less file.

I'm still not clear what is not working for you. Do you mean adding the css to extra.less for your style, or editing the PAGE_CONTAINER template for your style?

page_container template.

 

[Lawrence]

page_container template.

Open your PAGE_CONTAINER template for the style you are working on. Scroll down until you see this: <nav class="p-nav"> (there is only one instance of it). Once you see it, highlight it with your mouse and paste this over it: <nav class="p-navSticky p-navSticky--primary p-nav" data-xf-init="sticky-header">

Next scroll down until you see this: <div class="p-navSticky p-navSticky--primary" data-xf-init="sticky-header"> (there is only one instance of it). Highlight it, and paste this over it: <div class="p-navSticky">

Click Save, and done,

Don't worry about messing anything up in that template, you can always revert it back to its pre-edited state.