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

This topic has 20 replies, 5 voices, and was last updated 4 years ago by Ying.

Viewing 15 posts - 1 through 15 (of 21 total)

1 2 →

Author

Posts
February 23, 2022 at 4:58 am #2130353

Stephen

Hi I would be very grateful if you can tell me how 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)

http://www.stephenlavender.site

Thank you 👍

February 23, 2022 at 5:05 am #2130370

David
Staff
Customer Support

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

February 23, 2022 at 7:09 am #2130482
Stephen
No, if I do that it will effect my current normal header.

I need some CSS please to

– set size for logo in
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)
February 23, 2022 at 7:11 am #2130483

Stephen

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)

February 23, 2022 at 11:47 am #2130992

Leo
Staff
Customer Support

Hi Stephen,

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

February 24, 2022 at 6:04 am #2131772

Stephen

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

February 24, 2022 at 6:33 am #2131799
David
Staff
Customer Support
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;
    }
}
```
February 24, 2022 at 7:23 am #2131860

Stephen

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

February 24, 2022 at 7:54 am #2132084

David
Staff
Customer Support

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.

February 24, 2022 at 8:11 am #2132114

Stephen

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

February 24, 2022 at 8:32 am #2132136
David
Staff
Customer Support
Add this CSS rule:
```
.main-navigation.navigation-stick .navigation-branding img {
    height: 85px !important;
}
```
And adjust the 85px for your mobile size.
February 24, 2022 at 9:00 am #2132172

Stephen

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 ?

February 24, 2022 at 9:11 am #2132188
David
Staff
Customer Support
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 ?
March 3, 2022 at 11:20 am #2141305

Stephen

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

March 3, 2022 at 3:09 pm #2141497
Ying
Staff
Customer Support
– 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;
}
```
Author

Posts