nav-bar on full-width


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


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


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

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,

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,

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.