[Resolved] What are the css selectors for portions of the header elements?

[Thomas]

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.

[Ying]

Hi Thomas,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Thomas]

Can’t believe I forgot! 🙂 Just added it to the private information. Thanks 😀

[Ying]

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;
}

[Thomas]

Holy cow you are the best. Thank you SO SO much <3 <3

[Ying]

You are welcome 🙂

[Author]

Posts