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?

 

[Russ]

The width of the navigation inherits from: Style properties -> Page setup -> Maximum page width. If you increase the value here it'll increase the overall page width of the entire site.

If you want to just increase the navigation, you can add something like this to your extra.less template:

.p-nav .p-nav-inner, .p-sectionLinks .p-sectionLinks-inner {
    max-width: 1500px;
}

 

[Catsmother]

The width of the navigation inherits from: Style properties -> Page setup -> Maximum page width. If you increase the value here it'll increase the overall page width of the entire site.

If you want to just increase the navigation, you can add something like this to your extra.less template:

.p-nav .p-nav-inner, .p-sectionLinks .p-sectionLinks-inner {
    max-width: 1500px;
}

Thank you

I tried that code but I want to reduce the nav bar, is there a code for that please?

 

[Russ]

Just use a smaller value than 1500 . Out of the box, XF2 is 1200.

 

[Catsmother]

Just use a smaller value than 1500 . Out of the box, XF2 is 1200.

It hasn't worked.
Where exactly does it go? I am putting it in Navigation Row.

 

[Russ]

Any CSS you receive on these forums should go inside the template extra.less normally. Go to appearance -> templates -> extra.less and place the code there.

 

[Catsmother]

Any CSS you receive on these forums should go inside the template extra.less normally. Go to appearance -> templates -> extra.less and place the code there.

Thanks, I did what you said and all it did was move the text. I want the nav tree the same size as the forums.

 

[Russ]

Can you post screenshots of what you're after? You asked to adjust the width of the navigation bars which is exactly what my CSS achieves.

 

[Catsmother]

Can you post screenshots of what you're after? You asked to adjust the width of the navigation bars which is exactly what my CSS achieves.

Sorry about this.

Here is the screen shot, As you can see the nav bar overlaps the forum, I want it to show so it is equal.

 

[Catsmother]

Anyone?

 

[Mr Lucky]

Try this in style properties > Header and Navigation > Navigation row > freeform CSS

max-width:1000px;
margin:auto;

Use what width you want

Or
in extra.less

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

 

[Catsmother]

Try this in style properties > Header and Navigation > Navigation row > freeform CSS

max-width:1000px;
margin:auto;

Use what width you want

Or
in extra.less

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

Thanks that has worked. Just one more question though it did not do anything to the second row on the navigation. the row where new posts are etc.

 

[Mr Lucky]

extra css

.p-sectionLinks

{max-width:1000px;
margin-auto}

Or same with Style properties but sub navigation row freeform CSS

max-width:1000px;
margin-auto;

 

[Catsmother]

extra css

.p-sectionLinks

{max-width:1000px;
margin-auto}

Or same with Style properties but sub navigation row freeform CSS

max-width:1000px;
margin-auto;

They don't seem to work in Freeform.
Tried the sub nav in extra.less and it doesn't work.

 

[Lawrence]

Is this what you are trying to achieve?



If so, it's done by setting .p-sectionLinks-inner to 964px. and .p-nav to 960px. I also moved the background color from .p-sectionLinks to .p-sectionLinks-list.

 

[Mr Lucky]

Well, the

They don't seem to work in Freeform.
Tried the sub nav in extra.less and it doesn't work.

Works fine for me on default style

 

[Catsmother]

Is this what you are trying to achieve?

View attachment 234670

If so, it's done by setting .p-sectionLinks-inner to 964px. and .p-nav to 960px. I also moved the background color from .p-sectionLinks to .p-sectionLinks-list.

Yeah this is what I am trying to do Thank you!

Do I need to go in the templates to do that? and if so what area?

 

[Catsmother]

Well, the

Works fine for me on default style

Didn't realise that, thank you.

 

[Lawrence]

Yeah this is what I am trying to do Thank you!

Do I need to go in the templates to do that? and if so what area?

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">

 

[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">

Thank you so much for this, it worked

Just the Page container, I have this line on 136

<span class="p-nav-menuText">{{ phrase('menu') }}</span>