Help with creating header/navigation

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/

You are definitely getting a beer :)

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

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?

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

I edited the second CSS block here:

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

Thank you!

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

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

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

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