[Support request] Help with creating header/navigation

[David]

I adjusted your CSS so the @media is now 1024px to take into account the Tablet screen now uses the mobile view.

Now add this CSS:

@media(max-width: 1023px) {
    #secondary-navigation,
    .site-description {
        display: none;
    }

    .site-header .header-image {
        position: relative;
        bottom: -15px;
    }
}

It will remove the Secondary Nav and the Site title and move the logo down -15px on mobile/tablet devices.

Hover effects – for the secondary nav – add this CSS:

.main-navigation .main-nav ul li a,
.secondary-navigation .main-nav ul li a {
    position: relative;
}
.main-navigation .main-nav ul li a:after,
.secondary-navigation .main-nav ul li a:after {
    content: '';
    display: block;
    pointer-events: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #f00;
    transition: height 0.3s ease-in;
}
.main-navigation .main-nav ul li:hover a:after,
.main-navigation .main-nav ul li[class*="current-menu-"]>a:after,
.secondary-navigation .main-nav ul li:hover a:after,
.secondary-navigation .main-nav ul li[class*="current-menu-"]>a:after {
    height: 3px;
}

Really happy to be of help – no obligation but we do have a donate page here:

https://generatepress.com/ongoing-development/

[Saša]

You are definitely getting a beer 🙂

So can I add same hover effect to main navigation too?

[David]

Is that just the background colors ?
If so you can change them in Customizer > Colors > Primary Navigation.

Or do you want the same hover effect as the Secondary nav?

[Saša]

Same as second, i have added hover cover already but it is better if it would look like same as secondary nav.

[David]

I edited the second CSS block here:

https://generatepress.com/forums/topic/help-with-creating-header-navigation/page/3/#post-2079443

[Saša]

Thank you!

there is one thing left 😀 how can I disable this menu on tablet. Here is iPad screenshot. LINK

[David]

I thought you wanted the mobile menu also on tablet view?
So should it show the same as the desktop ?

[Saša]

Sorry i have upload wrong screenshot here is what I have meant: Link

[David]

Aah ok – so this CSS i provided:

@media(max-width: 1023px) {
    #secondary-navigation,
    .site-description {
        display: none;
    }

    .site-header .header-image {
        position: relative;
        bottom: -15px;
    }
}

Change the max-width: 1023px to 1024px

[Author]

Posts