Jump to content

Formatting the Hamburger Menu Overlay on Desktop

Recommended Posts

Site URL: http://www.ozankarakoc.com

Hello Friends!

(My website is at www.ozankarakoc.com and I'm in the Business Plan.)

Thanks to an earlier post, I achieved to force the hamburger menu to show up on desktop, but I couldn't find a way to format the overlay that opens when clicking the hamburger menu icon. 

The font size is too big that, when I place all my menu items, a scroll bar shows up, which looks unprofessional.

Is there a way to make the font smaller or reduce the line spacing so that all the navigation items fit in the overlay?

Thanks in advance!

Ozan

Link to comment
  • 7 months later...
19 hours ago, Dvid said:

www.juventusacademyboston.com

Add to Design > Custom CSS

/* Desktop menu spacing */
@media screen and (min-width:992px) {
.container.header-menu-nav-item a {
    margin-top: 5px;
    margin-bottom: 5px;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • 3 months later...

@tuanphan Hi! How can I make sure that the desktop hamburger menu looks exactly the same as the mobile version? The mobile one is the format I like the most, but when viewed on a desktop, the line height of the nav links are too much and the button font is a little too big. Images below – Left image is what the desktop view currently looks; right image is the mobile view and what I want. Thank you!!

181596061_.thumb.png.dd0569220e15d30151be997f221224ad.png    IMG_9291.thumb.PNG.2c0e9948c09f27539f9773e609eeafe4.PNG

Link to comment
12 hours ago, louieandthird said:

@tuanphan Hi! How can I make sure that the desktop hamburger menu looks exactly the same as the mobile version? The mobile one is the format I like the most, but when viewed on a desktop, the line height of the nav links are too much and the button font is a little too big. Images below – Left image is what the desktop view currently looks; right image is the mobile view and what I want. Thank you!!

181596061_.thumb.png.dd0569220e15d30151be997f221224ad.png    IMG_9291.thumb.PNG.2c0e9948c09f27539f9773e609eeafe4.PNG

Hi. What is site url?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
20 hours ago, louieandthird said:

www.louieandthird.com

pw: LTC

Add to Design > Custom CSS

/* Desktop overlay */
@media screen and (min-width:992px) {
div.container.header-menu-nav-item a {
    margin-top: 0.5vw;
    margin-bottom: 0.5vw;
}
a.theme-btn--primary.btn {
    font-size: 1.2rem;
    padding-top: 5px;
    padding-bottom: 5px;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
5 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Desktop overlay */
@media screen and (min-width:992px) {
div.container.header-menu-nav-item a {
    margin-top: 0.5vw;
    margin-bottom: 0.5vw;
}
a.theme-btn--primary.btn {
    font-size: 1.2rem;
    padding-top: 5px;
    padding-bottom: 5px;
}
}

 

THANK YOU!!

Link to comment
  • 1 month later...
On 9/4/2021 at 3:55 AM, jenniferboddam said:

hi @tuanphan is there a way to keep the contact button outside of the burger menu? I have the burger menu set up on the left and Id like the button to stay out side on the right at all times

I think this is possible, if you share url, we can take a look.

Also do you use Personal or Business or Commerce Plan?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Maybe not an instant answer, but we just released this plugin for 7.1: https://www.sqsmods.com/menu

I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10.

Link to comment
On 9/10/2021 at 12:15 AM, RolandFuseHub said:

Maybe not an instant answer, but we just released this plugin for 7.1: https://www.sqsmods.com/menu

Looks great. If I want to use it on some of my friend sites (I help my friends for free). I need purchase each license on each site or 1 license for all sites?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Just now, tuanphan said:

Looks great. If I want to use it on some of my friend sites (I help my friends for free). I need purchase each license on each site or 1 license for all sites?

Hi @tuanphan all of our plugins are license-free which means that one purchase = unlimited usage!

I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10.

Link to comment
  • 1 year later...
On 10/21/2022 at 2:58 AM, MargaretMercer said:

Hi https://forum.squarespace.com/profile/190085-tuanphan/ I am having trouble changing the spacing of my hamburger menu. Can you take a look at it? The url is westerlycanteen.com and the password is westerlycanteen

I see you solved with this CSS

div.header-menu-nav-item a {
    margin-top: 10px;
    margin-bottom: 10px;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.