Archived topic
menu bar full widt transparent
7 replies · Started by Torsten on September 7, 2018
Hi,
my client agreed to work with a horizontal menu, finally, which should make things alot easier.
1.) I'm missing how to set the menu bar to full width with transparecy set to rgba(255,255,255,0.8), same as the header image, when you scroll to one of the green sections you'll see that everything right of the menu items is fully transparemt.
2.) Other question, I cant't set the menu left padding, I would like to define header and menu left-padding in percentage...
best,
Torsten
Hi there,
you can set the Primary Navigation Full width in the Customiser > Layout > Primary Navigation.
Padding options via CSS:
.site-header .inside-header {
padding-left: 5%;
}
.main-navigation .inside-navigation {
padding-left: 5%;
box-sizing: border-box;
}thx for the padding, nice.
for the menu bar please take a look at https://bit.ly/2CteogC
upper image shows actual state, second one what I would like to achieve...
Thx in advance,
Torsten
So the Customiser settings don't work?
If so then this CSS:
.main-navigation {
width: 100%;
}Yes!
thx a lot!
another one:
I would like the menu bar to keep maximum the width of the header logo on one line when the browser window gets resized (within the blue vertical lines here → https://bit.ly/2oQRKFf )
the logo is set to:
.site-logo {
padding-top: 5%;
width: 70%;
box-sizing: border-box;
height: auto;
}
upper image shows what I would like to achieve, below shows what it actually is...
https://bit.ly/2NXaPkc
best, Torsten
Bit tricky as the two elements are not in the same container and it means making the font responsive to the viewport, so this should get you started:
@media (min-width: 768px) {
.main-navigation .main-nav ul li a {
font-size: 1.5vw;
}
}Top!
thanks David, have a nice weekend,
Torsten
You're welcome :)
