Editing the mobile nav bar for desktop

Site URL: https://green-horse-x2tl.squarespace.com

Hi All, 

I'm hoping someone could help. I'm trying to get my mobile nav bar to appear with the burger bar when on desktop and tablet, , which I know how to do by changing the mobile break point. However I'm finding everything is too small including the logo and nav bar height for desktop.

Is there any way you can change this via code? Just so that it's bigger for use on desktop, but still remains the same for mobile and tablet?

Any help would be amazing. I'm still finding my way with Squarespace but loving it, so any hints and tips to do with custom css would be great.

Thank you,

Esther

What is access password?

Hi Tuanphan, it's Gymbella2020. Thanks for your help.

4 hours ago, Esther_Day said:

Hi Tuanphan, it's Gymbella2020. Thanks for your help.

Like this?

Add to Design > Custom CSS

header.Header.Header--top {
    display: none !important;
}
[data-nc-base="mobile-bar"] {
    display: block !important;
}

Thank you so much for looking at this for me. Has that just changed it to the mobile nav bar? As I figured out how to do that by changing the mobile break point, it looked too small however, so wasn't sure if by doing it via code could make it larger but just on the desktop version and not mobile.

Hope I'm making sense. It's hard to tell on the screen grab if it looks any larger. I've screen grabbed to show you the difference when it's the burger bar and then the normal header, ideally I'm trying to get it so that the mobile burger bar appears at the same width as it's too small at the top of the screen on desktop when using mobile.

Thanks again,

Esther