Breaking point burger menu: burger displays left instead of right - Support

Tagged: Burger menu breaking point

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
August 22, 2023 at 2:02 pm #1416859
dominictschupp
Participant
Hi enfold-team!
I have a main menu in the left sidebar. I would like the burger menu for mobile on the right. This works fine for mobile. Now I would like to set the mobile breaking point earlier and I found this code:

@media only screen and (max-width: 1366px) {
.responsive #top .av-main-nav .menu-item-avia-special {
display: block !important;
}
.responsive #top .av-main-nav .menu-item {
display: none !important;
}
}

This does remove the menu and it adds the burger menu but it is displayed on the left, within the sidebar. I would like it to be like in the mobile view, on the right side.
Any thoughts? Thank you.
- This topic was modified 1 year, 4 months ago by dominictschupp.
August 23, 2023 at 11:01 am #1416935
Nikko
Inactive Moderator
Hi dominictschupp,

Please replace the CSS code you posted with this one:
```
@media only screen and (max-width: 1366px) {
    .responsive #top .av-main-nav .menu-item-avia-special {
        display: block !important;
    }

    .responsive #top .av-main-nav .menu-item {
        display: none !important;
    }

    .responsive #top #wrap_all #header {
        width: 100%;
    }
    
    .responsive #top #wrap_all .container {
        width: 85%;
        max-width: 85%;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
        float: none;
    }
    
    .responsive #top #wrap_all .main_menu {
        top: 0;
        height: 80px;
        left: auto;
        right: 0;
        display: block;
        position: absolute;
    }
}
```
Hope it helps.

Best regards,
Nikko
August 23, 2023 at 12:12 pm #1416947

dominictschupp
Participant

Thank you very much, Nikko.This works perfectly for the homepage https://5gambit.ch/ because the logo is set to not be visible. However, on any other page, like for example https://5gambit.ch/contact/, the logo now appears huge and over the content of the site, when the screen size is below 1366px.
Also, when clicking the burger-menu on screens between 1366px and mobile view, the menu-items in the flyout stick to the very top now.
May I ask you to have another look please? Thank you.

August 24, 2023 at 4:44 am #1417011
Nikko
Inactive Moderator
Hi dominictschupp,

Can you try to change the code I gave with this one:
```
@media only screen and (max-width: 1366px) {
    .responsive #top .av-main-nav .menu-item-avia-special {
        display: block !important;
    }

    .responsive #top .av-main-nav .menu-item {
        display: none !important;
    }

    .responsive #top #wrap_all #header {
        width: 100%;
    }
    
    .responsive #top #wrap_all .container {
        width: 85%;
        max-width: 85%;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
        float: none;
    }
    
    .responsive #top #wrap_all .main_menu {
        top: 0;
        height: 80px;
        left: auto;
        right: 0;
        display: block;
        position: absolute;
    }

    .responsive #top:not(.home) #wrap_all .container .logo {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .responsive #top:not(.home) #wrap_all .container .logo img {
        max-height: 120px;
        width: auto;
    }
}
```
Best regards,
Nikko
August 24, 2023 at 9:47 am #1417036

dominictschupp
Participant

Thank you for this, Nikko. Your code solved the problem with the logo being very big and covering the content on tablets. However, on any page besides the homepage, the content is now not aligned anymore and when clicking the burger-menu on screens between 1366px and mobile view, the menu-items in the flyout stick to the very top. Instead of havin to try to fix all this, would it not be easier to force the exact same view as on mobile starting on screens smaller than 1366px? This would be totally fine and I imagine that it would simplify the task here. So instead of having a desktop view, a tablet view and a mobile view, all this site needs is a desktop view and a mobile view for screens narrower than 1366px. Thank you very much in advance for your help.
Dominic

August 24, 2023 at 12:52 pm #1417044
Nikko
Inactive Moderator
Hi Dominic,

There’s actually an option for that but it is only applicable for browser width below 990px, you can see it in Enfold > Theme Options > Main Menu > General > Menu Items for Mobile.
However, your site needs a larger width, so we’ll have to use custom css for it (in most cases the first code I gave is sufficient but in your case there’s some additional modification), please replace it with this code:
```
@media only screen and (max-width: 1366px) {
    .responsive #top .av-main-nav .menu-item-avia-special {
        display: block !important;
    }

    .responsive #top .av-main-nav .menu-item {
        display: none !important;
    }

    .responsive #top #wrap_all #header {
        width: 100%;
    }
    
    .responsive #top #wrap_all .container {
        width: 85%;
        max-width: 85%;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
        float: none;
    }
    
    .responsive #top #wrap_all .main_menu {
        top: 0;
        height: 80px;
        left: auto;
        right: 0;
        display: block;
        position: absolute;
    }

    .responsive #top:not(.home) #wrap_all .container .logo {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .responsive #top:not(.home) #wrap_all .container .logo img {
        max-height: 120px;
        width: auto;
    }

    #top #av-burger-menu-ul {
        padding: 188px 0 !important;
    }
}
```
Best regards,
Nikko
August 24, 2023 at 2:46 pm #1417062

dominictschupp
Participant

I really appreciate your help, Nikko. And I am sorry if the layout of my site is more complicated than usual. We’re not quite there yet. The title and content of the sites other than the homepage (for example https://5gambit.ch/who-we-are/) is not left aligned under the logo anymore on screens below 1366px. Also, the logo is sticky now, since I entered your new code. This leads to the situation that the logo covers the content when the user scrolls.
Many thanks in advance for your support.
Best regards,
Dominic

August 24, 2023 at 3:34 pm #1417066
Nikko
Inactive Moderator
Hi Dominic,

You’re welcome :)
As for the issue you mentioned, the reason is because you have an empty 1/5 column and a 4/5 column on the page, here’s the fix for it (the code is only specific to the page you gave):
```
@media only screen and (max-width:767px) {
    #top.page-id-26 .av_four_fifth {
        width: 100%;
    }
}
```
If this needs to be applied in multiple page, or other pages in the future just let us know.

Best regards,
Nikko
August 24, 2023 at 4:49 pm #1417075
dominictschupp
Participant
Thanks, Nikko. I changed your last code to @media only screen and (max-width:1366px) and that works for https://5gambit.ch/who-we-are/. However, I have not figured out how to adapt your solution to the other pages. For example, https://5gambit.ch/anja-vogt/ has three rows of 1/5, 3/5, 1/5 columns. Do I have to adress your solution to every row and tell it to put the column with the content to 100% width? I have tried that but it did not work.
Still trying to left align the content on tablets on all other pages than https://5gambit.ch/ and https://5gambit.ch/who-we-are/ as they work fine.
Also: The problem with the sticky logo on screens below 1366px remains. The logo covers the content when scrolling on tablets.
- This reply was modified 1 year, 4 months ago by dominictschupp.
- This reply was modified 1 year, 4 months ago by dominictschupp.
August 25, 2023 at 2:52 pm #1417146
dominictschupp
Participant
May I ask again whether anyone could help me with this, please?
A quick recap: The website works fine on desktop and mobile, but not so great on screen-sizes between. Originally I hoped that we could just adjust the mobile breakpoint for it to swap to mobile view on any screens below 1366 px. But that does not seem to be possible.
Since, thanks to the help of Nikko, we have managed to change the logo to the burger menu below 1366px and to put it to the right of the screen. What remains to be resolved:
- The title and content need to be aligned left, below the logo on screens below 1366px. It only works on https://5gambit.ch/who-we-are/.
- Also, the logo should not be sticky on screens below 1366px as this leads to the situation that the logo covers the content when the user scrolls.
Thank you very much for your help,
Dominic
August 26, 2023 at 11:05 pm #1417208
Mike
Moderator
Hi,
Thank you for your patience and the recap, I see that Nikko’s solution works for /who-we-are/ because it uses 1/5 + 4/5 columns
On /anja-vogt/ you are using 1/5, 3/5, 1/5 columns so try this css:
```
@media only screen and (max-width: 1366px) { 
	#top.page-id-549 .av_three_fifth {
		width: 100%;
	}
	#top.page-id-549 .av_one_fifth.el_before_av_three_fifth,
	#top.page-id-549 .av_one_fifth.el_after_av_three_fifth {
		display: none;
	}
}
```
If you use the same layout for your other pages you can remove the page ID: .page-id-549 from the css.
To remove the sticky header between 768px and 1366px try this css:
```
@media only screen and (max-width: 1366px) { 
	.html_header_sidebar #top #wrap_all #header.av_always_sticky {
    position: absolute;
}
}
```
After applying the css, please clear your browser cache and check.

Best regards,
Mike
August 28, 2023 at 2:39 pm #1417330

dominictschupp
Participant

Thank you very much for your help, Mike! It works! I managed to adapt your code to all subsites. Now there is one issue left: On tablets, the clickable elements on https://5gambit.ch/team/ and on https://5gambit.ch/what-we-do/ are not clickable anymore (for example the fist photo on https://5gambit.ch/team/ or the 4 squares on https://5gambit.ch/what-we-do/). It looks as if they were covered by the header.
Any thoughts on this?

August 29, 2023 at 11:21 am #1417404

dominictschupp
Participant

It looks as if I had found a way to solve the problem of the header overlapping the content on tablets and thus preventing the clickable elements from being clickable. I have set the min-height of the header to 0.

@media only screen and (min-width: 768px) and (max-width: 1366px) {
.html_header_sidebar #top #header {
min-height: 0;
}
}

Thank you all for your help.
This topic can be closed.
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Breaking point burger menu: burger displays left instead of right’ is closed to new replies.