Archived topic
What are the css selectors for portions of the header elements?
5 replies · Started by Thomas on March 2, 2021
Hey everybody.
Trying to put together a specialized header and i'm about 90% of the way there. Utilizing GeneratePress Premium (Love it!) I have this so far:
I can't for the life of me figure out what CSS elements I need to manipulate to do the following:
1. Stretch the orange bar all the way to the left also.
2. Move the "logo" image further towards the right, about 20%.
3. Force the logo to always be at the top:0 position on the screen
4. This might be a pipe dream, but is there a way to set a divider between menu elements?
Thanks so much for your help.
Hi Thomas,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Can't believe I forgot! :) Just added it to the private information. Thanks :D
1. I added a media query, so it only works on desktop:
@media (min-width: 769px) {
.inside-navigation.grid-container:before {
content: "";
height: 60px;
position: absolute;
left: -50vw;
width: 100vw;
background-color: #e9ad25;
z-index: 0;
}
.site-logo {
z-index: 999;
}
}
body {
overflow-x: hidden;
}2. You have this CSS already, just adjust the number:
.site-logo {
padding-left: 40px;
}3. Remove the top header padding at Customizing > Layout > Header.
4. Try this CSS:
#primary-menu ul li {
border-right: 1px solid #fff;
}Holy cow you are the best. Thank you SO SO much <3 <3
You are welcome :)
