[Resolved] Styling navigation menu

[Zoran]

Hi,

I’m trying to achieve this look with the navigation and header:

I’m having trouble adding that top effect on the menu item when it’s current or hovered, as well as that rectangle before the logo.

Can you provide assistance?

Kindly,
Z

[Leo]

Hi there,

I would recommend using this method:
https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

Can you do that first and I can provide some CSS?

Let me know 🙂

[Zoran]

Hi,

Yes, of course, I have done these steps:

1.Set your navigation location to Below Header or Above Header in Customize > Layout > Primary Navigation.
2.Remove your site title/tagline/logo from the header in Customize > Site Identity.
3.Set your Navigation Logo Position to Sticky + Static.
4.Set your Sticky Navigation Transition to None.
5.Then, full remove your header using the CSS below:

[Leo]

Try this CSS:

.main-navigation .main-nav ul li a {
    border-top: 2px solid transparent;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    border-top: 2px solid #11b2ae;
}

[Zoran]

Hi!

This works, only the border is too big right now, and the whole header is tiny in height:

[Leo]

Hmm the border is the menu item width plus the padding.

Can you link me to the example site and I can see how they did it?

[Zoran]

The image i gave as an example is just a mockup in PS 😐

[Leo]

Hmm so would it be a fixed length regardless the length of the menu item?

What about a popular solution like this?
https://docs.generatepress.com/article/adding-menu-hover-animation/

[Zoran]

Hi,

Sorry for the late response. Yes, the length can be a fixed value!

[David]

Hi there,

the height of the header is defined by the size of the logo or by increasing the line-height of the menu items.

Whats wrong with the code that Leo provided here it can be easily adjusted for the border to sit at the top of the navigation. Let me know.

[Zoran]

Hi, I tried using the code, it did not work.

[David]

Can you add the code so i can see what the issue is and provide a fix?

[Zoran]

I’ve added it.

[David]

Ok so replace it with this, i have commented the lines you need / can edit for colors, thickness and width:

@media (min-width: 769px) {
    .main-navigation .menu > li > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        top: 0;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);

        display: block;
        width: 0;
        height: 2px; /* Change thickness of border */

        background-color: #1e73be; /* Change Color */
        transition: 0.3s width ease;
    }
    .main-navigation .menu > li.current-menu-item > a::after,
    .main-navigation .menu > li.current-menu-ancestor > a::after,
    .main-navigation .menu > li > a:hover::after {
        width: 50%; /* Change width of border */
    }
}

[Zoran]

Works, and looks awesome now. Thank you!

Regarding the rectangle on the left of the logo, how would you suggest adding it?

[Author]

Posts