sticky header logo size + not shrink + stay to side of menu

Hi there,

can you enable the Navigation as Header in Customizer > Layout > Header.
Then if required, adjust the Container widths in Customizer > Layout > Primary Navigation

No, if I do that it will effect my current normal header.

I need some CSS please to

– set size for logo in

sticky

header

– stop logo in sticky header from shrinking

– and keep sticky header logo and menu at the same height with logo on left and menu float right
( at the moment the logo goes above the menu sometimes)

No, if I do that it will effect my current normal header.

This is for the STICKY header

I need some CSS please to

– set size for logo in STICKY header

– stop logo in STICKY header from shrinking

– and keep STICKY header logo and menu at the same height with logo on left and menu float right
( at the moment the logo goes above the menu sometimes)

Hi Stephen,

Are you happy with the current static/normal header where the menu is split into two lines?

Hi Leo, yes thats fine.

In my NORMAL Header nav menu is split on lines floating to the right of the Logo.

For the STICKY Header I would like the logo size smaller and have the nav menu floating right like my NORMAL Header.

So I think I need some CSS please to

– set Logo size in STICKY header

– stop Logo shrinking in STICKY header

- keep Logo to left in STICKY Header with Nav menu float right

Thanks
Stephen

Try the following:

1. Customizer > Layout > Sticky Navigation and increase the Menu item height so it matches that in the Layout > Primary Navigation.

2. Add this CSS:

@media(min-width: 851px) {
    .main-navigation.navigation-stick .inside-navigation.grid-container {
        display: block;
    }
    .main-navigation.navigation-stick .navigation-branding {
        float: left;
        padding: 10px 10px 10px 10px;
    }
    .main-navigation.navigation-stick .navigation-branding img {
        height: 85px !important;
    }
}

Very useful thanks. This works for desktop STICKY header but not for mobile STICKY Header

- How to make this work for Mobile header as well please ?

Also

- How to add padding to STICKY header logo as this is a different logo to normal Logo

Did you do #1 above ? As this will also define the height of the mobile menu items which in turn adjusts the height of the logo?

I updated the CSS above to include this property:

padding: 10px 10px 10px 10px; adjust the 4 values ( Top Right Bottom Left ) to suit your needs.

Hi, thats fantastic for above 851px screen size

- Can I set the STICKY Header logo size below 851 please ?

Currently Below 851 in STICKY Header I have a Hamburger Nav menu on the right and Logo on the left and the Logo is too small.

- Can I set STICKY Header Logo size below 851
- and have hamburger menu floating on the right

Thank you
Stephen

Add this CSS rule:

.main-navigation.navigation-stick .navigation-branding img {
    height: 85px !important;
}

And adjust the 85px for your mobile size.

great thank you.

- How can I change back ground colour of STICKY header ?

- Also if I select MOBILE header how can I change this background colour ?

This CSS to change the sticky background color:

.sticky-enabled .main-navigation.is_stuck {
    background-color: #f00;
}

If you do not add that CSS then the Sticky Navigation uses the same color as the Navigation > Background.

Do you want to enable the Mobile Header ?

Hi, sorry for the delay, so many jobs to do and the latest WP Astra theme update broke my live website this morning !

Very useful - the sticky header background is same colour as the navigation background so I can set that.

I would like to use a different background colour for the for mobile screen HEADER.

I can set a different LOGO for the mobile HEADER but I cant see how to set a background colour for mobile HEADER or how to set SIZE of the LOGO in mobile HEADER.

So please can you tell me:

- How to set background colour for mobile HEADER ?
- How to set logo size for mobile HEADER ?

Thanks for your help

– How to set background colour for mobile HEADER ?

Try this CSS:

#mobile-header {
    background-color: blue;
}

– How to set logo size for mobile HEADER ?

Try this CSS:

.site-logo.mobile-header-logo img {
    width: 100px;
    height: auto;
}