- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
Well…
<div>
is display: block
by defaultdisplay: block
has width: 100%
by defaultwidth: 100%
you don’t need the auto
margins unless you’re overriding somethingWhich is why we’d need the full site URL OR (better) a reduced test case up on CodePen.
There are a lot or wrapper
s 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.
Side note, I highly recommend learning how to use any browser’s developer tools. This is trivial to see there.
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.