Changing Hamburger Size

[HeartHealth]

We are looking to change the max width for the hamburger menu to 600px or smaller. Weebly chat mentioned that the only way to do this is to use custome code.  Can someone please let us know if this is possible and if they can help us write the code?

[PaulMathews · Accepted solution]

Put the code between opening and closing style tags:

<style>

@Media (min-width: 993px) {
.hamburger {
display:none!important;
}
}

</style>

If it doesn't fix things when you place this in the header code, move it to the footer code. Essentially, you want to load this modifying css as late as possible so that it comes after the hamburger.css reference which is what is causing the desktop hamburger view issue.

[PaulMathews]

Your website address?

[HeartHealth]

www.portraithealthcenters.com

[PaulMathews]

Your mobile navigation sidebar slideout menu appears to be fixed at 275 pixels in width. When you say you want your hamburger menu to be 600 pixels wide or less, what are you referring to? The mobile navigation sidebar looks about right for most mobile screens.

.navmobile-wrapper {
position: fixed;
display: block;
opacity: 0;
width: 275px;
height: 100%;
padding: 80px 0 20px 0;
top: 0;
left: 0;
box-sizing: border-box;
overflow-y: auto;
background: #ffffff;
-webkit-transition: opacity 0s 1s linear;
-moz-transition: opacity 0s 1s linear;
-o-transition: opacity 0s 1s linear;
transition: opacity 0s 1s linear;
}

Additionally, why is your hamburger visible on non-mobile viewports? You'll see the hamburger right above your logo. Your site's mobile breakpoint is 992px. The hamburger should not be visible on viewports wider than 992px. The offending css is highlighted in red below - this item should be removed from the hamburger class css.

.hamburger {
padding: 12px 0px!important;
display: inline-block!important;
cursor: pointer!important;
transition-property: opacity, filter!important;
transition-duration: 0.15s!important;
transition-timing-function: linear!important;
font: inherit!important;
color: inherit!important;
text-transform: none!important;
background-color: transparent!important;
border: 0!important;
margin: 0!important;
overflow: visible!important;
}

[HeartHealth]

Yes.  The hamburger menu over the logo is what we are trying to fix.  Do you know if we have the ability to delete that line of code, or do we need weebly to do that for us?

Thank you!!

[PaulMathews]

Weebly normally doesn't do code modifications or customizations. However, you can remove that line of code yourself. Do the following:

1. In the Site Editor, click on "Theme" in the top navigation menu then click "Edit HTML/CSS" at the bottom of the left-hand sidebar.
2. In the Code Editor, scroll down to the "Styles" area in the left-hand sidebar and click on your css file (usually "main.less").
3. In the code window, do a search for ".hamburger {" (click the search icon at the top of the code window and enter the search term).
4. That term may possibly occur more than once so ensure that the code block I've indicated in my previous response is the same as the one you find in the search. Locate the offending css code and remove it or disable the code line by placing it between comment indicators (e.g., /* display:inline-block!important; */) 

[HeartHealth]

When I search the main.less file the only place that code seems to appear is:

    .wsite-menu-mobile-arrow{

        display:inline-block!important;

        font-size:inherit!important;

        padding:0 5px;

Is this the one to delete?  I don't see any .hamburger in the entire main.less.

[PaulMathews]

Looks like you implemented an animated hamburger from here: https://jonsuh.com/hamburgers/ which explains why you couldn't find the hamburger css. That css is not part of the Weebly theme code but instead originates from an external stylesheet (https://app.engati.com/static/css/hamburger.css).

You'll have to essentially add your own media query for viewports over 992px that overrides the inline-block display of that hamburger (in the external stylesheet) and sets it to not visible (in the Weebly stylesheet). Try adding this code to your css (you can add this near the top of the main.less code):

@media (min-width: 993px) {
.hamburger {
display:none!important;
}
}

[HeartHealth]

I tried adding the code right after the /* General Styling line but it did not make the menu disappear. 

[PaulMathews]

Ah, okay, it looks like the hamburger css is being loaded after the Weebly css. Since you don't appear to be leveraging any hamburger animation (which is the only reason to reference the external hamburger css), the addition of the externally controlled hamburger seems pretty pointless. On mobile, your site uses the default Weebly hamburger. Accordingly, I'd suggest you simply go to the Code Editor, and remove the hamburger class from the mobile navigation trigger div. In the Code Editor, click on the header.html page header type and, in the html, locate the following div tag:

<div class="nav-trigger hamburger">

Remove the hamburger class reference from that tag so that it looks like this:

<div class="nav-trigger">

This will allow your navigator to revert to the default Weebly theme behavior (which makes the hamburger non-visible in viewports wider than 992px). If you employed that hamburger class in any other header type (e.g., no-header.html), remove it there as well.

[HeartHealth]

Ok.  So I updated the code in the editor as described.  This removed the menu from above the logo, but now the hamburger menu does not work on the mobile site and on the desktop if you shrink the page to make the menu appear.

[HeartHealth]

Can someone please take a look at this chain and see if this issue can be fixed?  We made the suggested changes, but now the hamburger menu does not work on the desktop and mobile app.  Any help would be greatly appreciated!!!

[PaulMathews]

Return the hamburger class to the nav-trigger div. That will restore the original behavior. After that, you could try adding the hamburger class media query to your own css file which you'll reference in your SEO Settings header in the hope that the file will load after the external hamburger.css file.

[HeartHealth]

Thank you.  It appears that might work when putting this code into the Header Code, however the code appears on the top of each page.  Is there a way to make the code hidden?

To confirm, I added the code below to the seo header code section.

@Media (min-width: 993px) {
.hamburger {
display:none!important;
}
}

Thanks for your help!

[PaulMathews · Accepted solution]

Put the code between opening and closing style tags:

<style>

@Media (min-width: 993px) {
.hamburger {
display:none!important;
}
}

</style>

If it doesn't fix things when you place this in the header code, move it to the footer code. Essentially, you want to load this modifying css as late as possible so that it comes after the hamburger.css reference which is what is causing the desktop hamburger view issue.

[HeartHealth · Accepted solution]

THANK YOU!  I cannot be more grateful.  You are awesome!!!

[sf-weebly]

Hi @PaulMathews I've been reading this thread and you seem extremely knowledgable. My hamburger menu on mobile view is not working when clicked. I have just seen the code where you suggest removing the word hamburger from this code 

<div class="nav-trigger hamburger">

I have removed it from all header types (header.html, no-header.html, splash.html) but its still not opening. Can you please help me further?

[PaulMathews]

@sf-weebly Sorry, I no longer do any client work on the Weebly platform and no longer contribute solutions to this forum.