Glossy header

[afarahani]

Is there any way that I can have a glossy header? (e.g. like the one here

Also Let me know how I can change the header color from black to white in mobile version.

Do you have any manual that each color field changes which element color?

Thanks,
Amir

[Laura]

Hello, for the glossy header try adding this to style.css of child theme and need to find a good slider image that creates the contrast of dark and white like attached.

COPY CODE

div#header {
    background: rgba(255, 255, 255, 0.07);
    border-bottom: 1px rgba(255, 255, 255, 0.37) solid;
    height: 100px;
}

For mobile menu white color:

COPY CODE

@media only screen and (max-width: 940px) {
.top-bar > ul .name h1 a {
    background: #000000 !important;
}
.top-bar ul > li.has-dropdown .dropdown li.has-dropdown > a li a:hover, .top-bar ul > li.toggle-topbar {
    background: #000000 !important;
}
nav.top-bar a {
    color: white !important;
}
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[afarahani]

Thank you Laura.

Now that we turn the header background into white in mobile (480 px), the menu square should turn into some other color to be visible. How can I do that?

Amir

[Laura]

Hello, could you link me to the page? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[afarahani]

Here is the page link.

Another problem is this code applies to every other pages I have such as member pages, etc. I want it to be applied only to this page.

Regards,
Amir

[Laura]

Hello, so glossy header and mobile white only for that page?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[afarahani]

Yes please!

[Laura]

Hello, try this replacing the other code

COPY CODE

body.page.page-id-816 #header {
    background: rgba(255, 255, 255, 0.07);
    border-bottom: 1px rgba(255, 255, 255, 0.37) solid;
    height: 100px;
}
@media only screen and (max-width: 940px) {
body.page.page-id-816 .top-bar > ul .name h1 a {
    background: #000000 !important;
}
body.page.page-id-816 .top-bar ul > li.has-dropdown .dropdown li.has-dropdown > a li a:hover, .top-bar ul > li.toggle-topbar {
    background: #000000 !important;
}
body.page.page-id-816 nav.top-bar a {
    color: white !important;
}
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts