[Resolved] Sticky menu customizing.

[Jusung]

Hello!

When you see the sticky header,
The menu color and the border between menu is white.
Is there a way to make it black on sticky header and blog page?

Also, you can see the underline on the header.
I want to make it blakc on blog page and sticky header.

[David]

Hi there,

try adding this CSS to change the site title and border colors on sticky nav:

.main-navigation.is_stuck .main-nav > ul > li:not(:first-child)::after {
    background-color: #000;
}
.main-navigation.is_stuck .navigation-branding .main-title a {
    color: #000 !important;
}

The bottom border color. You have this CSS:

@media (min-width: 769px) {
    #site-navigation .inside-navigation {
        border-bottom: 1px solid #f4f2f3;
    }
}

Change that to:

@media (min-width: 769px) {
    #site-navigation .inside-navigation {
        border-bottom: 1px solid #000;
    }
    .header-wrap #site-navigation .inside-navigation {
        border-bottom: 1px solid #f4f2f3;
    }

}

That way the light color only gets applied where the merged header is enabled.

[Jusung]

On the blog page, on the main menu, is there a way to make the title and the border between menu black.?

Also, I have one more question.

When you see the border between menu, the thickness is different.
Can I make the thickness the same?

.main-navigation .main-nav > ul > li:not(:first-child):after {
content: “”;
height: 50px;
width: 1px;
background-color: white;
position: absolute;
top: calc(40% – 10px);
}
.main-navigation .main-nav > ul > li {
position: relative;
}

This code is applied

[Ying]

is there a way to make the title and the border between menu black.?

The border is added using below CSS, you can simply change the white to black.
.main-navigation .main-nav > ul > li:not(:first-child):after {
content: “”;
height: 50px;
width: 1px;
background-color: white;
position: absolute;
top: calc(40% – 10px);
}

Can I make the thickness the same?

They are the same, they are all 1px in width.

[Jusung]

It has to be black only on blog page.
on other page, it has to be white.

[David]

This CSS:

.blog .main-navigation .main-nav > ul > li:not(:first-child):after {
    background-color: #000;
}

[Jusung]

Thank you! It works!

[David]

Glad to hear that

[Author]

Posts