wordpress menu help

[Bones_Jones]

hi guys,

i want the menu to be 100% full width so it fills the entire screen. so this is what i did

div.main-superfish-wrapper {
width:100%;
background: #000;
display:block !important;
margin-left:auto;
margin-right:auto;
}

but eh, it’s not working… what am i doing wrong? help! thx in advance.

[shaneisme]

Well…

• A <div> is display: block by default
• Anything that is display: block has width: 100% by default
• If you’re using width: 100% you don’t need the auto margins unless you’re overriding something

Which is why we’d need the full site URL OR (better) a reduced test case up on CodePen.

[shaneisme]

There are a lot or wrappers on this site!

Anyway, the element .header-container.container is set to a max-width: 960px and your superfish menu is child to this.

If you made the container 100% width, the logo would go all the way over to the left as well as a consequence.

[shaneisme]

Side note, I highly recommend learning how to use any browser’s developer tools. This is trivial to see there.

[shaneisme]

Well I would do something like this instead (so you don’t change .container everywhere):

.header-container {
  max-width: none;
}

There’s probably more to it than that, some padding, etc. that you’ll need to account for.

And if you want it centered inside like your example, just add in a text-align: center to it.

[Author]

Posts