Adjust Mobile Menu Breakpoint 4.8.8 - Support | Kriesi.at

Tagged: mobile menu

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

Author

Posts
December 13, 2021 at 5:45 pm #1332624

goldengate415
Participant

HI, I noticed that my menu is wrapping after 1652 pixels (feel free to double check that..) and I am thinking it would be good to switch to the hamburger menu below that size. I found this code on the internet and tried it, but the menu just disappears until the mobile is triggered. Can you please help me? Thanks, Rob

/* change breakpoint for mobile menu */
@media (max-width: 1652px) { /* Change the width as you need */
.responsive #top #avia-menu.av-main-nav .menu-item {
display: none !important;
}
.responsive #top .#avia-menu.av-main-nav .menu-item-avia-special {
display: block !important;
}
}

The site is http://www.thomashenthorne.com
Marin Real Estate Agent

December 13, 2021 at 5:53 pm #1332628
Yigit
Keymaster
Hey Rob!

I just checked your website and it seems to be switching to mobile menu at 1300px. You may also have a CSS code similar to following one in Quick CSS field or in Style.css file of your child theme which might be the reason why menu did not show up at certain screen sizes.
```
/* Activate burger menu */
 @media only screen and (max-width: 1300px) {
#top #header .av-main-nav > li.menu-item  {
    display: none!important;
}
#top #header .av-burger-menu-main {
    cursor: pointer;
    display: block!important;
}}
```
Could you please check if that is the case? :)

Regards,
Yigit
December 13, 2021 at 6:43 pm #1332640

goldengate415
Participant

Hey Yigit! Good to hear from you and happy holidays.

I copied the quick CSS.. which has grown over the years.. to private content… is something in there conflicting? Feel free to let me know any that are obsolete / conflicting that I can delete.

Thanks!!!
Rob

December 14, 2021 at 3:15 pm #1332792
Yigit
Keymaster
Hi Rob,

Happy holidays!

Could you please try replacing the code with the one I attached in private content field?

I found following code and updated screen size so that should fix the issue :)
```
@media only screen and (max-width: 1300px) and (min-width: 768px) {
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
display: block;
}

.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
display: none;
}
}
```
Best regards,
Yigit
December 14, 2021 at 5:07 pm #1332823

goldengate415
Participant

Hi Yigit, thanks so much for this.
I am sorry – maybe not enough coffee this morning, but I have been comparing my custom CSS to the pastebin and my eyes are swimming.
In the pastebin, there is code at the top, then there’s a section at the bottom called “RAW PASTE DATA”… Is the Raw Paste Data what I should copy and paste, all of it, to replace all of my custom CSS? Or do I take the snippet in your response and figure out where that goes and paste it into my custom CSS in the appropriate place? I am not sure if you made other changes elsewhere.

Sorry – I feel very stupid but have been staring and comparing all the different versions and now they all look the same to me.. haha

Thanks!
Rob

December 14, 2021 at 5:15 pm #1332825

Yigit
Keymaster

Hey Rob,

Yes, you can copy the code from “RAW PASTE DATE” field. The section above just shows the content.

Please do not feel that way. I just changed “1300px” to “1652px”. Very small change so very easy to miss :)

Regards,
Yigit

December 14, 2021 at 5:18 pm #1332826

goldengate415
Participant

Thanks so much and the code is live and working!
Any idea why the hamburger menu switches over to the left side of the screen as you narrow the screen, then back to the right ?
It would be great if it would stay on the right the whole time… :

Thanks,
Rob

December 14, 2021 at 5:29 pm #1332831

Yigit
Keymaster

Hey Rob,

I updated the code a bit. Could you please update CSS code once again? :)

Regards,
Yigit

December 14, 2021 at 5:33 pm #1332834

goldengate415
Participant

Perfect, thank you!
While you were in the custom CSS, do you say any that is obsolete that I should delete?
I know there’s the old mobile css selector in there, but since some pages on the site still use that I guess I will keep it, but anything else that jumps out?

Thanks so much,
Rob

December 14, 2021 at 5:49 pm #1332837
Yigit
Keymaster
Hey rob,

I could not see any selector that is deprecated but there are some things you can do with options instead of using CSS codes.

For example, you have following code to make borders rounded on button element with “rounded-button” class
```
#top .rounded-button a.avia-button {
border-radius: 30px;
}
```
You can edit button elements and adjust their border radius in Styling > Borders now – https://i.imgur.com/7rCORiZ.png

Instead of using following code
```
.main_menu ul:first-child > li > a { font-size: 18px; }
```
You can go to Enfold theme options > Advanced Styling and edit “Main Menu Links” to increase main menu font size

Instead of using following code
```
p.toggler.av-inherit-border-color {
background-color: #002348;
color: #ffffff

}
```
You can edit Accordion element and use custom color options

Instead of following code
h1, h2, h3, h4, h5, h6 { text-transform: none !important; }
You can go to Enfold theme options > Advanced Styling and edit “All Headings (H1-H6)” to change text transform

That seems to be it :)

Regards,
Yigit
December 14, 2021 at 5:52 pm #1332838

goldengate415
Participant

GREAT thank you so much Yigit!

Best,
Rob

December 14, 2021 at 6:10 pm #1332845

Yigit
Keymaster

Hey,

You are welcome, Rob! Always happy to help :)

Best regards,
Yigit

December 14, 2021 at 6:33 pm #1332847

goldengate415
Participant

Thanks again and happy holidays! OK to close thread.

December 14, 2021 at 6:34 pm #1332848

Yigit
Keymaster

Hi,

Happy holidays! :)

Regards,
Yigit
Author

Posts

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

The topic ‘Adjust Mobile Menu Breakpoint 4.8.8’ is closed to new replies.