[Resolved] Header, navigation and navigation

[Hazel]

Hi Guys, It’s me again, sorry. I have more or less got the header right but somewhere in the CSS I’ve got a problem.

What I want is the navigation and header and a sticky full-width header on scroll. The sticky navigation first came up transparent and I put in a background color. It now seems to have added that on top of the header as well. The CSS I’ve got so far is:

.inside-navigation {
    max-width: 1800px;
    margin: auto;
}

.navigation-clone {
    background: #9dcb3b;
    padding: 10px 0px 10px 0px;
    max-width: 100% !important;
    left: auto !important;
    margin: 0 !important;
}

.main-nav .fa {
    font-size: 36px;
    font-weight: 600;
}

You’ll see that resizing the phone icon works while the search icon is not. Any help would be appreciated.

[David]

Hi there,

try this CSS:

.main-nav .fa {
    font-size: 36px;
    font-weight: 600;
    line-height: 60px;
}

.main-nav .search-item a {
    font-size: 30px;
    font-weight: bold;
}

Added a line height to your phone icon to help vertically center it in the nav, and used a separate rule for the search icon as it looks larger and there isn’t any weight varients for the search icon.

[Hazel]

Hi David
Thanks very much for this. I have finally gotten mostly to where I need. I’m a great GP fan but I believe the menu situation could do with some love.

I think the sticky menu should have its own settings across the customiser instead of the few available. I have gone through absolute misery trying to set the width and background colour. Judging by the number of requests in the support forum I’m not the only one. There should be a option to decouple it totally from the the appearance settings of the main navigation.

Another very handy thing would be if the search item was a font awesome icon icon and customiser controls too.

Thanks again.

[David]

We are always looking for ways to improve the set-up, so do appreciate your feedback. There are options within the theme that may have made this task a little easier:

Option 1 – with nav float right:
I would generally use the Header Element if i needed to change the static nav colors:

https://docs.generatepress.com/article/header-element-overview/#site-header

As these only apply to the static nav the sticky nav will then use the Colors you have set on the Primary Navigation.

Option 2 – Navigation as Header ( this is now a 1 click function in GPP 1.8 alpha ):

https://docs.generatepress.com/article/navigation-as-a-header/

We intentionally removed FontAwesome from the Theme. Mainly because the library is very heavy. GP only uses a few icons and its current font file is under 1.5kb. As opposed to over 75kb to load FontAwesome which is crazy for loading 4 or 5 icons. Let alone the amount of CSS it requires.

But we’re always looking at ways to improve so i will raise this concern internally.

[Author]

Posts