Jump to content

Editing the mobile nav bar for desktop

Recommended Posts

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

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

4 hours ago, Esther_Day said:

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

Like this?

image.thumb.png.ac253141e3f376ac502eb80a15eb58c9.png

 

Add to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Screenshot 2020-02-05 at 19.51.11.png

Screenshot 2020-02-05 at 19.52.39.png

Edited by Esther_Day
add images
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.