Stretch Menu Bar Width

Hi, I’m seeing your menu actually wider to the left than your header image. Remove this,

.main-navigation {
    margin: 0 !important;
}

and then add this and see if that gets you what you are looking for.

#mega-menu-wrap-header #mega-menu-header {
text-align: left;
}

That did help align it, Thank you!! I did the text-align to Center, because I want the menubar in the middle:

#mega-menu-wrap-header #mega-menu-header {
text-align: center;
}

The reason I had

.main-navigation {
    margin: 0 !important;
}

Was because it flushed the menubar to the header image; now there’s a gap.
I tried adding it back in, but it looks like that code, is that made it wider on the left.

Is there a way to flush the menubar back to the header image, yet still keeping it aligned?

Thank you so much,

• This reply was modified 6 years, 10 months ago by Art2Design.
• This reply was modified 6 years, 10 months ago by Steven Stern (sterndata).

Is there a way to flush the menubar back to the header image, yet still keeping it aligned?

I’m not sure I’m understanding what you are wanting here. Can you explain a bit further please?

Oh I’m sorry!

What I mean is, how do I now remove the gap between the menubar and the header image?

Thank you

Did you get this taken care of? It appears that you may have with this custom CSS.

.header-wrap {
    display: none;
}

Hi Scaredpath,

Please take a look again, I temporarily tried a different plugin.
The CSS code you stated is what removes the search-bar from the top of the menu.
But what I’m trying to achieve is to remove the gap between the menu and the header (you’ll see what I mean when you view the site).

Thanks for your endearing help!

Ah, sorry for misunderstanding. Try the following. If you want a bit more of a gap between the nav and header image, adjust the 0 value as desired.

@media screen and (min-width: 50em) {
  .main-navigation {
    margin-bottom: 0;
  }
}

That did it!
You are amazing sir!

Thank you so much

Hooray and you are welcome!