nav-bar on full-width

Shapely
1

Hi!

I¨m having some trouble with adjusting my navigation bar to full width.

I successfully changed it by changing the following line in the header.php

from

<nav id="site-navigation" class="main-navigation" role="navigation">
				<div class="container nav-bar">

to

<nav id="site-navigation" class="main-navigation" role="navigation">
			<!--changed class from container nav-bar to nav-bar to make it fullwidth-->
				<div class="nav-bar">

the thing is: it works on every page of the site but the home page. On the home, the navigation still has the container class and I don¨t understand why. Doesn´t it get it´s header from the same header.php as all the other pages?

Thanks a lot!

2

Hello there,

I hope you are doing well today.

You can use the following CSS code to make the navigation full width by going to Appearance > Customize > Additional CSS and pasting it there.


/*Nav bar width*/
.container.nav-bar {
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
}

You can remove the padding to remove the space at the left and the right side of the bar.

Best Regards,
Support

3

Thanks very much!

It turned out that my solution was correct but my browser didn’t show me the actual version… so I think it’s done.

Thanks anyway,
Anna

4

Hi @annaschimpf,

Glad you got it working. :slight_smile:

Also, always do your code level customization using the Child theme, Child Themes « WordPress Codex so that the changes will be there, even after the update.

Let us know if you have any other questions in a separate thread.

Thanks,
laranz.