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

[Stephen]

Thats great – you’re a star !

So the mobile HEADER logo size is good but then when the mobile HEADER changes to STICKY mobile header the logo height scrunches down.
So the mobile sticky HEADER logo width is good but the height is wrong

– Can I set the mobile HEADER sticky logo height or set the mobile HEADER sticky logo to not squash down in height ?

Thank you …

[Ying]

You are welcome!

Try edit the logo CSS to this:

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

[Stephen]

Hi, thats perfect.

Can I also

– Change mobile HEADER hamburger to white ?

– Make the mobile HEADER hamburger a bit bigger ?

Thank you very much

[Fernando]

Hi Stephen,

Here is a CSS code you may add to make the modifications you desire for tablet and mobile:

.inside-navigation button.menu-toggle {
    color:white;
    font-size: 20px;
}

If you wish to be able to control the color in your Global Colors(Appearance > Customize > Colors), you may use this code instead:

.inside-navigation button.menu-toggle {
    color:var(--base);
    font-size: 20px;
}

Kindly replace base with the CSS Variable name of your Global color. Moreover, change the font size(20px) to your preferred icon size.

See: https://share.getcloudapp.com/E0ug2Gvn

If you wish it to take effect in mobile. you would need to put the code in a media query as such:

@media (max-width: 768px) {
    /* CSS in here for mobile only */
    .inside-navigation button.menu-toggle {
        color:white;
        font-size: 20px;
    }
}

Hope this helps! Kindly let us know how it goes. 🙂

[Stephen]

Hi Fernando, that worked perfectly thanks.

I set the ham burger colour in CSS as it easier than Global !

Now I’m looking at the FOOTER.

Currently i have 4 widget areas in my FOOTER which are arranged 4 columns x 1 row and change to 1 columns x 4 rows for mobile phone screen size.
I would like to have an intermediate for tablet screen size where the 4 widget areas are arranged 2 columns x 2 rows.

– Can you help me with some CSS to arrange my 4 FOOTER widget areas in 2 columns x 2 rows for tablet screen size?

Thank you
Stephen

[Ying]

Hi Stephen,

Glad your header problem is resolved.

For the footer problem, can you open a new topic?

Thanks!

[Author]

Posts