main menu navbar span the entire width of the page

  • Unknown's avatar
    nordicrpa · Member ·

    Hello,

    I want to have my main menu navbar span the entire width of the page and be centered, I have tried different CSS options but could not get it to work. Can you please help me with the CSS or options for this?

    Thanks.
    Aa

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi! Your theme will soon have full-site editing, which will let you handle this sort of thing without CSS. You might consider waiting until then. I don’t have an ETA but I do know it’s in active development.

    But for now, you could use something like this to make the masthead area wider.

    Please note, CSS that changes the layout of the page is outside the scope of support we can offer, because it does get complex for different screen widths and what not. I can give you a head start though.

    How to make the masthead wide in Hever, which will stretch out the header area for the logo and menu and what not:

    @media screen and (min-width: 600px) {
  body:not(.fse-enabled) #masthead {
	width: 100%;
	margin-left: 0;
	padding: 32px;
	margin-right: 0;
	max-width: 100%;
  }

  #main {
	margin-top: 0px;
	padding-top: 0px;
  }
}

    I think you’ll find if you put your other CSS changes within an @media declaration like that, you’ll have more luck, since what you’re doing is likely being overridden otherwise.

    Hoping that helps. Also, be sure to get in touch via chat if you need help. We’re much faster there (although less able to provide CSS tips like we can asynchronously.)

    Cheers!

  • Unknown's avatar
    nordicrpa · Member ·

    Thank you for your reply, unfortunately, it doesn’t quite work. The navbar is still not on the full width of the screen but was moved lower and to the left. Unfortunately seems to overlap with the banner on other pages than the home page.
    Also, the logo is placed above the navbar instead of on it.
    As an additional note that might be relevant, I am using the mega menu plugin along with Hever theme.

  • The topic ‘main menu navbar span the entire width of the page’ is closed to new replies.