Stretch Menu Bar Width

  • Resolved Art2Design

    (@art2design)


    8 years, 1 month ago

    Hi,

    I’m looking to stretch the menu bar width of the theme to match the header picture, so it looks even.
    I’m using Mega Menu plugin for the menu bar, but they said that to expand the width I need to change the CSS of the theme.

    Any help is certainly most appreciated.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    8 years, 1 month ago

    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;
}
    Thread Starter Art2Design

    (@art2design)

    8 years ago

    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,

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    8 years ago

    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?

    Thread Starter Art2Design

    (@art2design)

    8 years ago

    Oh I’m sorry!

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

    Thank you

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    8 years ago

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

    .header-wrap {
    display: none;
}
    Thread Starter Art2Design

    (@art2design)

    8 years ago

    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!

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    8 years ago

    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;
  }
}
    Thread Starter Art2Design

    (@art2design)

    8 years ago

    That did it!
    You are amazing sir!

    Thank you so much

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    8 years ago

    Hooray and you are welcome!

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Stretch Menu Bar Width’ is closed to new replies.

Tags