Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Formatting the Hamburger Menu Overlay on Desktop


ItsOK

Question

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

20 answers to this question

Recommended Posts

  • 1

Add to Home > design > Custom CSS

.header-menu-nav-item a {
    padding-top: 1vw;
    padding-bottom: 1vw;
}
.header-menu-nav-folder[data-folder="root"] {
    overflow: hidden;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 3/17/2021 at 11:05 PM, Dvid said:

I'm having the same issue with the line spacing and the scroll bar. What's the full hamburger code that you're using?

can you share link to your site? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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.

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
  • 0

@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
  • 0
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.

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
  • 0
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.

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
  • 0
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
  • 0
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.

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
  • 0
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.

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
  • 0
6 hours ago, RolandFuseHub said:

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

Saved your site. Thank you!

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Create an account or sign in to comment

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

×
×
  • Create New...