If you want to customize the theme code, this is up to you, but you have to know this is not a easy task. You have to take a look in the sonaar/classic-menu/js/classic-menu.js file
Thanks for reply Alexandre, Wow really suprised there's no simple option to do this in the theme settings... most all great WP themes I have allow for this option. I'd really suggest adding this in an update so we can avoid the broken header/menu look when we have more than normal number of menu tabs in smaller browser windows. Thnks
So curious, 6 months later (I'm really surprised many Sonaar customers don't need this, my menu is not that large http://billyvera.com/welcome-to-billy-vera-the-official-site/ but you can see the issue between Macbook Pro 16" screen shrink to tablet the visual menu issues w being 'cut off') Sonaar still has not theme updated or CSS option to adjust responsive menu breakpoints?
Unfortunately, adjusting menu automatically depending the number of items VS size of the display would required javascript calculation. Usually, its very simple but doing JS calculation with browser window and its resizing is quiet CPU extensive.
The other option would be to add an option for admin user to set the monitor width where they want the menu to shrink into responsive size but it would be quiet complex for beginner users to understand the concept.
Usually, people have much less menu items that the website you are showing us here or people usually regroup menu items into sub menus so it takes less width spaces.
The other solution is to use Elementor Pro to build your custom menu and adjust it the way you want.
The sonaar classic menu break point is hardcoded. It is not flexible. The menu responsive breaking point customization is beyond the scope of our support. We dont recommend to change it. The menu animation speed is also beyond the scope of our support. Some custom css codes are required. Our team can help you with this task, but you have to take our service "website-customization" https://sonaar.io/service/website-customization-service/
I had the same issue previously and was able to resolve it. You have to modify the file classic-menu/js/classic-menu.js and likely also need to make the change in the minified javascript file which was in the same folder (classic.min.js).
// Activate Mini menu.
var lastScrollTop = 0
$(document).on('scroll touchmove', function (e) {
var offset = $(this).scrollTop()
var st = $(this).scrollTop()
if (($('.classic-menu').hasClass('mini-active') || $('.classic-menu').hasClass('mini-fullwidth-active')) && !$('.classic-menu').hasClass('responsive')) {
if (offset > 150) {
if (!$('.classic-menu').hasClass('mini')) {
$('.classic-menu').addClass('mini');
}
if (logo_url !== logo_scroll_url) {
$('.classic-menu').find('.classic-menu-logo').attr('src', logo_scroll_url)
$('.classic-menu').find('.classic-menu-logo').attr('srcset', logo_scroll_url + ' 1x, ' + logo_mini_url + ' 2x')
}
if (logo_mini_url != '') {
$('.classic-menu').find('.classic-menu-logo').attr('src', logo_mini_url)
$('.classic-menu').find('.classic-menu-logo').attr('srcset', logo_mini_url + ' 1x, ' + logo_mini_url + ' 2x')
}
}
if (offset <= 150) {
if ($('.classic-menu').hasClass('mini')) {
$('.classic-menu').removeClass('mini')
}
$('.classic-menu').find('.classic-menu-logo').attr('src', logo_url)
$('.classic-menu').find('.classic-menu-logo').attr('srcset', logo_url + ' 1x, ' + retina_logo_url + ' 2x')
$('.classic-menu').css('height', '')
}
}
lastScrollTop = st
//
Change the value "150" in "if (offset > 150)" to the number of pixels you want for the breakpoint.
This is a bit beyond my custom coding comfort zone but I will dig into via FTP and see if I can dial all in as suggested (do I need a child theme for these so when updating the theme the code stays intact or fine without a child theme?)
BIG UPS and really surprised this isn't a theme setting option as most my other fav WP themes have this (and it's all about #mobilefirst these days, has been my priority for 5-6 years actually)
Hey guys, that's just so crazy to me that 6 menu items is 'too much' where smaller laptop menu headers will break into a second row. I need 7 menu items and I found out I don't have access to the clients FTP to edit the .js file
I tried to use the push menu but this is an auto scrolling one page site, when you click any tab to scroll to that section the slide out menu won't slide back. Is there an option for this? Also how do I shrink social icons size in slide out menu pls?
This site is ready to go live and these menu issues are all that's holding me up. Thanks for assist again and I really suggest in a Sonaar 2020 having these custom options in the header settings (I have to think many others are having one of these issues, most sites need more than 5 items in a menu after all) BIG THNKS and you guys know from day one I've said one of the best WP themes ever!
The mobile menu works great on phone view (slides back out of view after scrolling to the section pressed) but it doesn't act like that on Push Menu desk/laptop just to clarify (screenshot in previous email). It stays in view after going to section pressed so wondered how to have it slide back away on scrolling one page style.
And where do I adjust the mobile menu social icons? They aren't matching with the hot link icons/links
I dont recommand to do custom work in the theme core. The next theme update will remove every code you have changed.
The Push Menu anchor link will be fixed in the next theme update. You can fix it yourself to wp-admin>theme options>custom css/jss Andd add this code in the custom JS field ( not the custom CSS field)
Those worked Great, BIG UPS Alexandre! Curious how to even out these text colors in slide out menu? I don't see any other option the single color for Menu TypographyChoose a font, font size and color
Ok, got it Alexandre. It's def confusing as that's a universal Hyperlink color option. It seems there should be 3 diff Menu color options for Text/Active (page or sections)/Hover options for the Header settings or Menu settings (GRT to have in an update!).
Thanks for the quick help and all good to go Live now!
We just took our awesome Sonaar new site live and client LUVS https://BillyVera.com (Grammy award winning singer)
I just noticed on my iPhone and mobile desktop tools that the mobile menu one page links are not scrolling to their sections. The laptop/desktop menu works great. Any idea the issue pls?
make sure you run with the latest Sonaar version (4.11). I'm pretty sure we have fixed it in our latest version released last week:
---------------------------------------------- V.4.11 - 2020.01.10 ---------------------------------------------- - Reduced the theme size considerably by removing the source mapping of our CSS compiler. It will be faster to load. - Added option in the Music Player widget to set the HTML Title Heading - Added options in Podcast Category page to manage the menu colors - Fixed issue with the Music Player in the Footer where the next track would not automatically start in some case - Fixed single podcast Show page where it could not display all episodes when the grid option is selected - Fixed Push Menu Overlay style and its background. In some case there was a glitch when scrolling down the menu. - Fixed Push Menu panel that was not retracting after clicking a menu item containing an anchor link - Optimized code structure for better performance - Updated Essential Grid to 2.3.6
Ahhh Awesome Maxime! and so great to see you guys always rockin' updates for the amazing $onaar! I pay yearly also for the Rife theme and they don't seem to be doing updates on into 2020 so am going to cancel that membership. Most all of us are always improving our skills and tools daily/monthly/yearly for self and clients so I don't support those that don't do the same.
I'll install the latest version of Sonaar for BillyVera.com to fix that one page auto scrolling menu issue asap. Is it best to leave the child theme as is and delete the main Sonaar theme and then upload the latest version from my Sonaar downloads page? Also curious why it says my subscription has expired in the WP dashboard alert (screenshot) as I show I paid for another year Sept 6, 2019 I just want to make sure All Good w Us man!$
I just updated the theme and as suggested Elementor, cleared cache but the mobile menu still not auto-scrolling to the sections. I tried multiple times on my iPhone and mobile laptop simulator but the issue still there. I guess my client hasn't noticed but of course I need to get this working as soon as possible (plus for any other Sonaar clients).
Are you seeing this on your end also still? BIG THNKS for the assist!
I just checked out on my phone and a few of the links are working, but I double checked the one page menu links in menu as well as Rows CSS ID names and all are correct but still having these issues when I check on my iPhone and mobile Chrome simulator pls see here https://share.getcloudapp.com/yAuLAezp Are you/anyone there seeing the menu working correctly as you mentioned? Aplgz for this but of course just need to have a properly working menu for client (and he is a very popular singer so this site is or will be getting quite a bit of traffic) BIG THNKS always for your time and expertise https://billyvera.com
I hope you've been as well as can be in and thru these cRaZy last few years.
Curious if any option was ever added in the amazing theme to adjust menu header to responsive breakpoints? I was trying to adjust for this client https://demos.thewebstylist.com/jeanineorci/ (and this is a friend gig I'm not charging much at all for) with CSS and had a coding buddy in our building try to help but he reminded me it was a javascript issue which reminded me of this support thread. ha I've worked with so many themes over 8 yrs I'd forgotten. Just most every theme has this option but I noticed there is an Elementor header build option but really wanted to use theme options. Is this still not possible? I didn't see it in there but now noticed Alexandre you replied it would be in the next release? Pls let me know
and whats the latest Sonaar Fam?! How's all looking for life and times these days heading towards Summer 2022?!
Hi, Oh yes, last years was crazy, but now things go back to normal. About the sonaar menu, no we didnt have developped any new classic menu feature because we have moved to the next gen sonaar menu built with elementor. With the elementor header we can change the break point. See here
Ahhh ok GRT to hear Alexandre things back to normal yes after 2 cRaZy years everywhere!
And cool yeah the Elementor menu/header custom options are pretty amazing and super flexible (especially with the Pop Ups for awesome mobile menu styles) so will just use that here forward
Just curious where the setting is to make the header/menu break into responsive version sooner when downsizing view window
BIG UPS Sonaar Fam!
Hi Sterling,
Sonaar doesnt have this option.
If you want to customize the theme code, this is up to you, but you have to know this is not a easy task.
You have to take a look in the sonaar/classic-menu/js/classic-menu.js file
Thanks,
Alexandre from the Sonaar.io Crew
Thanks for reply Alexandre, Wow really suprised there's no simple option to do this in the theme settings... most all great WP themes I have allow for this option. I'd really suggest adding this in an update so we can avoid the broken header/menu look when we have more than normal number of menu tabs in smaller browser windows. Thnks
-Sterling
Hey Sonaar Fam!
So curious, 6 months later (I'm really surprised many Sonaar customers don't need this, my menu is not that large http://billyvera.com/welcome-to-billy-vera-the-official-site/ but you can see the issue between Macbook Pro 16" screen shrink to tablet the visual menu issues w being 'cut off') Sonaar still has not theme updated or CSS option to adjust responsive menu breakpoints?
Pls let me know BIG UPS 2020!
Hi,
Unfortunately, adjusting menu automatically depending the number of items VS size of the display would required javascript calculation. Usually, its very simple but doing JS calculation with browser window and its resizing is quiet CPU extensive.
The other option would be to add an option for admin user to set the monitor width where they want the menu to shrink into responsive size but it would be quiet complex for beginner users to understand the concept.
Usually, people have much less menu items that the website you are showing us here or people usually regroup menu items into sub menus so it takes less width spaces.
The other solution is to use Elementor Pro to build your custom menu and adjust it the way you want.
Thanks,
Max from the Sonaar.io Crew
Hey Maxime,
Ok I just thought I'd ask and true I can build really any custom styled menus in Elementor.
Is there though to just a way to slow the animation down/control the mobile menu fade in speed? https://www.dropbox.com/s/uosfyy9onu8hn1s/billyveramobilemenu.mov?dl=0 http://billyvera.com/welcome-to-billy-vera-the-official-site/And where can we adjust the responsive header/menu break point in pixels? BIG THNKS and to a great 2020 for you and Sonaar!
Hi Sterling,
The sonaar classic menu break point is hardcoded. It is not flexible. The menu responsive breaking point customization is beyond the scope of our support. We dont recommend to change it. The menu animation speed is also beyond the scope of our support. Some custom css codes are required. Our team can help you with this task, but you have to take our service "website-customization" https://sonaar.io/service/website-customization-service/
Thank you
Thanks,
Alexandre from the Sonaar.io Crew
Hi Sterling,
I had the same issue previously and was able to resolve it. You have to modify the file classic-menu/js/classic-menu.js and likely also need to make the change in the minified javascript file which was in the same folder (classic.min.js).
// Activate Mini menu. var lastScrollTop = 0 $(document).on('scroll touchmove', function (e) { var offset = $(this).scrollTop() var st = $(this).scrollTop() if (($('.classic-menu').hasClass('mini-active') || $('.classic-menu').hasClass('mini-fullwidth-active')) && !$('.classic-menu').hasClass('responsive')) { if (offset > 150) { if (!$('.classic-menu').hasClass('mini')) { $('.classic-menu').addClass('mini'); } if (logo_url !== logo_scroll_url) { $('.classic-menu').find('.classic-menu-logo').attr('src', logo_scroll_url) $('.classic-menu').find('.classic-menu-logo').attr('srcset', logo_scroll_url + ' 1x, ' + logo_mini_url + ' 2x') } if (logo_mini_url != '') { $('.classic-menu').find('.classic-menu-logo').attr('src', logo_mini_url) $('.classic-menu').find('.classic-menu-logo').attr('srcset', logo_mini_url + ' 1x, ' + logo_mini_url + ' 2x') } } if (offset <= 150) { if ($('.classic-menu').hasClass('mini')) { $('.classic-menu').removeClass('mini') } $('.classic-menu').find('.classic-menu-logo').attr('src', logo_url) $('.classic-menu').find('.classic-menu-logo').attr('srcset', logo_url + ' 1x, ' + retina_logo_url + ' 2x') $('.classic-menu').css('height', '') } } lastScrollTop = st //Change the value "150" in "if (offset > 150)" to the number of pixels you want for the breakpoint.
Hope this helps.
Erik
Thanks so much Erik!
This is a bit beyond my custom coding comfort zone but I will dig into via FTP and see if I can dial all in as suggested (do I need a child theme for these so when updating the theme the code stays intact or fine without a child theme?)
BIG UPS and really surprised this isn't a theme setting option as most my other fav WP themes have this (and it's all about #mobilefirst these days, has been my priority for 5-6 years actually)
-Sterling
Hey guys, that's just so crazy to me that 6 menu items is 'too much' where smaller laptop menu headers will break into a second row. I need 7 menu items and I found out I don't have access to the clients FTP to edit the .js file
I tried to use the push menu but this is an auto scrolling one page site, when you click any tab to scroll to that section the slide out menu won't slide back. Is there an option for this? Also how do I shrink social icons size in slide out menu pls?
http://billyvera.com/welcome-to-billy-vera-the-official-site/
This site is ready to go live and these menu issues are all that's holding me up. Thanks for assist again and I really suggest in a Sonaar 2020 having these custom options in the header settings (I have to think many others are having one of these issues, most sites need more than 5 items in a menu after all) BIG THNKS and you guys know from day one I've said one of the best WP themes ever!
The mobile menu works great on phone view (slides back out of view after scrolling to the section pressed) but it doesn't act like that on Push Menu desk/laptop just to clarify (screenshot in previous email). It stays in view after going to section pressed so wondered how to have it slide back away on scrolling one page style.
And where do I adjust the mobile menu social icons? They aren't matching with the hot link icons/links
https://share.getcloudapp.com/llu46vdg https://share.getcloudapp.com/ApuOx8gN
Big Thnks
Hi Sterling,
I dont recommand to do custom work in the theme core. The next theme update will remove every code you have changed.
The Push Menu anchor link will be fixed in the next theme update.
You can fix it yourself to wp-admin>theme options>custom css/jss
Andd add this code in the custom JS field ( not the custom CSS field)
jQuery('.menu-item a[href*="#"]').click(function() {
jQuery('.menu-toggle.toggled').trigger('click');
});
Thanks,
Alexandre from the Sonaar.io Crew
You can reduce the Social media size with this custom css code. Please add this in the custom css field:
.social-networks a i {
font-size: 25px;
}
Thanks,
Alexandre from the Sonaar.io Crew
Those worked Great, BIG UPS Alexandre! Curious how to even out these text colors in slide out menu? I don't see any other option the single color for Menu TypographyChoose a font, font size and color
the current item color and the hover item color is the color 1 from wp-admin>theme options>look and feel.
Thanks,
Alexandre from the Sonaar.io Crew
Ok, got it Alexandre. It's def confusing as that's a universal Hyperlink color option. It seems there should be 3 diff Menu color options for Text/Active (page or sections)/Hover options for the Header settings or Menu settings (GRT to have in an update!).
Thanks for the quick help and all good to go Live now!
We just took our awesome Sonaar new site live and client LUVS https://BillyVera.com (Grammy award winning singer)
I just noticed on my iPhone and mobile desktop tools that the mobile menu one page links are not scrolling to their sections. The laptop/desktop menu works great. Any idea the issue pls?
Hi,
make sure you run with the latest Sonaar version (4.11). I'm pretty sure we have fixed it in our latest version released last week:
----------------------------------------------
V.4.11 - 2020.01.10
----------------------------------------------
- Reduced the theme size considerably by removing the source mapping of our CSS compiler. It will be faster to load.
- Added option in the Music Player widget to set the HTML Title Heading
- Added options in Podcast Category page to manage the menu colors
- Fixed issue with the Music Player in the Footer where the next track would not automatically start in some case
- Fixed single podcast Show page where it could not display all episodes when the grid option is selected
- Fixed Push Menu Overlay style and its background. In some case there was a glitch when scrolling down the menu.
- Fixed Push Menu panel that was not retracting after clicking a menu item containing an anchor link
- Optimized code structure for better performance
- Updated Essential Grid to 2.3.6
Thanks
Thanks,
Max from the Sonaar.io Crew
Ahhh Awesome Maxime! and so great to see you guys always rockin' updates for the amazing $onaar! I pay yearly also for the Rife theme and they don't seem to be doing updates on into 2020 so am going to cancel that membership. Most all of us are always improving our skills and tools daily/monthly/yearly for self and clients so I don't support those that don't do the same.
I'll install the latest version of Sonaar for BillyVera.com to fix that one page auto scrolling menu issue asap. Is it best to leave the child theme as is and delete the main Sonaar theme and then upload the latest version from my Sonaar downloads page? Also curious why it says my subscription has expired in the WP dashboard alert (screenshot) as I show I paid for another year Sept 6, 2019 I just want to make sure All Good w Us man!$
Hi,
From what I see in my system, your license and subscriptions are both active and the subscription ends on Sep 2020.
Could you please provide me access to your wp-admin and I will gladly check the issue you have?
Thanks,
Max from the Sonaar.io Crew
Just curious, whenever a new Sonaar update is released, is it automatically available in my downloads/the previous version is replaced?
Hi,
Your subscription is now fixed. it was a glitch on our side.
And yes, when an update is available, it will show in WP-Admin > Dashboard > Update. See screenshot: https://d.pr/i/2yn4CA
As you can see, there is one update available.
Thanks,
Max from the Sonaar.io Crew
Ahhh ok Great Maxime thanks.
I just updated the theme and as suggested Elementor, cleared cache but the mobile menu still not auto-scrolling to the sections. I tried multiple times on my iPhone and mobile laptop simulator but the issue still there. I guess my client hasn't noticed but of course I need to get this working as soon as possible (plus for any other Sonaar clients).
Are you seeing this on your end also still? BIG THNKS for the assist!
Thanks to have reported this issue. It is fixed.
Thanks,
Alexandre from the Sonaar.io Crew
Hey Alexandre,
I just checked out on my phone and a few of the links are working, but I double checked the one page menu links in menu as well as Rows CSS ID names and all are correct but still having these issues when I check on my iPhone and mobile Chrome simulator pls see here https://share.getcloudapp.com/yAuLAezp Are you/anyone there seeing the menu working correctly as you mentioned? Aplgz for this but of course just need to have a properly working menu for client (and he is a very popular singer so this site is or will be getting quite a bit of traffic) BIG THNKS always for your time and expertise https://billyvera.com
We are working on it.
Thanks,
Alexandre from the Sonaar.io Crew
It is fixed
Thanks,
Alexandre from the Sonaar.io Crew
It works perfect now!! Woooo Hoooo 👏🏻
Is this worked into the latest Sonaar theme update/one page menu fix now?
BIG THNKS Alexandre!
I have fixed your theme code, but this fix is not yet released. It will be part of the next theme update.
Thanks,
Alexandre from the Sonaar.io Crew
Heyyy Sonaar Fam!
I hope you've been as well as can be in and thru these cRaZy last few years.
Curious if any option was ever added in the amazing theme to adjust menu header to responsive breakpoints? I was trying to adjust for this client https://demos.thewebstylist.com/jeanineorci/ (and this is a friend gig I'm not charging much at all for) with CSS and had a coding buddy in our building try to help but he reminded me it was a javascript issue which reminded me of this support thread. ha I've worked with so many themes over 8 yrs I'd forgotten. Just most every theme has this option but I noticed there is an Elementor header build option but really wanted to use theme options. Is this still not possible? I didn't see it in there but now noticed Alexandre you replied it would be in the next release? Pls let me know
and whats the latest Sonaar Fam?! How's all looking for life and times these days heading towards Summer 2022?!
Hi,
Oh yes, last years was crazy, but now things go back to normal.
About the sonaar menu, no we didnt have developped any new classic menu feature because we have moved to the next gen sonaar menu built with elementor.
With the elementor header we can change the break point.
See here
Thanks,
Alexandre from the Sonaar.io Crew
Ahhh ok GRT to hear Alexandre things back to normal yes after 2 cRaZy years everywhere!
And cool yeah the Elementor menu/header custom options are pretty amazing and super flexible (especially with the Pop Ups for awesome mobile menu styles) so will just use that here forward
BEST all ways forward Sonaar fam for one and All!
Thanks Sterling,
Have a nice day.
Thanks,
Alexandre from the Sonaar.io Crew