On smaller screens, the standard navigation switches to the hamburger navigation. This happens at a certain width. I'd like to change that breakpoint width, so the switch happens at a greater screen width. How?
Thanks!
EDIT: Ideally the breakpoint would depend on the width of the menu (class sf-menu), but it doesn't ...
You see the button I added to the right, this maybe the cause of the issue. But would be no problem if I could just change the breakpoint.
I edited responsive.css and init.js, in many places, and that worked, basically. Only the logo is now very small between the original breakpoint and my new one. Do you have an idea where to fix that?
ok, that's good enough for a temporary workaround, thanks. But really, it would be perfect if you had the breakpoints as parameters, it would make the theme much more flexible and versatile. thanks!
I see now there is a Mobile Breakpoint selection slider in the Salient Options Panel. The lower limit is now set to 1000px. Is it somehow possible for me to override this and set it as low as 1px? Basically, do not want a mobile breakpoint. I want to keep my top menu links always visible in the top bar (not switch them into the off-canvas menu, ever). This is because I only intent to use 2 short menu links, in that top menu, which will fit even in narrow smart phones.
(A big trend in UX development seems to allow for top or bottom menu tabs, as we see in more and more mobile apps. I intend to still use the hamburger menu for less critical items, via your "Secondary Navigation", but it would be nice to have my two most important menu items always at the top, even on mobile.)
It'd be nice to set all break points to be honest. The small desktop breakpoint isn't working for my purposes and would love to set it theme/site wide as opposed to writing CSS and micromanaging sizes across site.
Years later, still stuck with the same issue, on a different site.
Is there still no good way to change the break points? I see all the settings in responsive.css, 400 declarations. Do I need to go through all of that, just to change what could be a single variable?
The current issue is that I have three columns in one row, and these columns get ridiculously narrow before eventually breaking down to a single column row. Is there perhaps another decent way to fix this rather than the messy way of trying to find the right declarations in that css file?
Thanks for your quick reply. Yes, I know these settings. But how are they useful here? I can only select what happens at the preselected widths, not change those preselected widths. Or, what would be even nicer, select breakpoint widths rather than devices here.
Do I need to go through all of that, just to change what could be a single variable?
Unfortunately, CSS still does not allow for variables to used in media queries, but there's hope that it may be implemented within the next year or so. For now, you would still need to override the responsive.css/grid-system.css via your child theme if you wish to alter the breakpoints to something custom.
I would instead recommend just creating custom breakpoint rules that change the column width to 1/1 depending on your setup if you can't achieve what you're looking for via the responsive font sizing options available.
For example, here's a CSS rule that would adjust columns set to 1/3 width to be 1/1 on small desktop displays:
@media only screen and (max-width: 1200px) {
.vc_col-sm-4 {
width: 100%;
}
}
Thanks for the suggestion. CSS maybe not, but SCSS certainly does allow variables anywhere. And in some other themes this is no issue, breakpoint settings are offered in the backend. Just like Salient now has it for the header.
Meanwhile I added some CSS for the element that I had the greatest problem with, so for me it's ok for now.
I purchased the theme today and came here to try to find out how to use SCSS with it, but after reading these comments it seems like it's not even possible!?
If that's the case, is there any way for me to load the Salient WP Bakery templates into another template of mine?
On smaller screens, the standard navigation switches to the hamburger navigation. This happens at a certain width. I'd like to change that breakpoint width, so the switch happens at a greater screen width. How?
Thanks!
EDIT: Ideally the breakpoint would depend on the width of the menu (class sf-menu), but it doesn't ...
Hey Ralf,
Currently its not possible without adjusting Theme core files and they wont last a Theme Update so its not recommended.
Thanks
ThemeNectar Support Team
Thanks, Tahir. I don't mind changing core files, but currently it breaks the layout at certain widths, so I MUST change it. Where, please?
(Maybe in some future version you can add this as a parameter, seems rather essential to me ...)
You can switch to the Full Width Header or reduce the left and right padding of the menu to fix it from breaking.
Let me know the url and ill write some css for you.
To change the breakpoint you are gonna have to edit two files see Screenshot 1:http://prntscr.com/a0ip1u and Screenshot 2: http://prntscr.com/83b9f2 .
Update Note: Responsive.css code is actually now on line 2125
Thanks
ThemeNectar Support Team
I don't see how changing padding would help, but you are welcome to have a look:
http://wp.hanspeterfrei.com/
You see the button I added to the right, this maybe the cause of the issue. But would be no problem if I could just change the breakpoint.
I edited responsive.css and init.js, in many places, and that worked, basically. Only the logo is now very small between the original breakpoint and my new one. Do you have an idea where to fix that?
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
@media only screen and (max-width: 1110px) and (min-width: 1px) { body header#top #logo img, #header-outer[data-permanent-transparent="false"] #logo .dark-version { height: 58px!important; margin-top: -21px!important; } }Thanks
ThemeNectar Support Team
ok, that's good enough for a temporary workaround, thanks. But really, it would be perfect if you had the breakpoints as parameters, it would make the theme much more flexible and versatile. thanks!
Yes its in the wishlist.
Thanks
ThemeNectar Support Team
I see now there is a Mobile Breakpoint selection slider in the Salient Options Panel. The lower limit is now set to 1000px. Is it somehow possible for me to override this and set it as low as 1px? Basically, do not want a mobile breakpoint. I want to keep my top menu links always visible in the top bar (not switch them into the off-canvas menu, ever). This is because I only intent to use 2 short menu links, in that top menu, which will fit even in narrow smart phones.
(A big trend in UX development seems to allow for top or bottom menu tabs, as we see in more and more mobile apps. I intend to still use the hamburger menu for less critical items, via your "Secondary Navigation", but it would be nice to have my two most important menu items always at the top, even on mobile.)
Abbas
@Abbas , At the moment its not possible though have noted it in the Wishlist .
Be.st
ThemeNectar Support Team
Yes - i want this too - 1000px is to much :(
Not possible yet i am afraid.
Best
ThemeNectar Support Team
We really need the Mobile Breakpoint to scale much smaller than 1000 :/ Lets start a petition?
It'd be nice to set all break points to be honest. The small desktop breakpoint isn't working for my purposes and would love to set it theme/site wide as opposed to writing CSS and micromanaging sizes across site.
Hi Vince,
We will add this to our wishlist.
Thanks.
Great! Hopefully this feature will be available soon
Years later, still stuck with the same issue, on a different site.
Is there still no good way to change the break points? I see all the settings in responsive.css, 400 declarations. Do I need to go through all of that, just to change what could be a single variable?
The current issue is that I have three columns in one row, and these columns get ridiculously narrow before eventually breaking down to a single column row. Is there perhaps another decent way to fix this rather than the messy way of trying to find the right declarations in that css file?
Thank you!
Hey Ralf,
Did you try adjusting these options : .
Thanks
ThemeNectar Support Team
Hi Tahir,
Thanks for your quick reply. Yes, I know these settings. But how are they useful here? I can only select what happens at the preselected widths, not change those preselected widths. Or, what would be even nicer, select breakpoint widths rather than devices here.
Ralf
Hello Ralf,
How about you try changing from here:
Thanks.
Hello Judith,
Thank you, but that is only for the navigation. I need this for the content.
Ralf
Escalating this to the developer for further response.
Best
ThemeNectar Support Team
Hey Ralf,
Do I need to go through all of that, just to change what could be a single variable?
Unfortunately, CSS still does not allow for variables to used in media queries, but there's hope that it may be implemented within the next year or so. For now, you would still need to override the responsive.css/grid-system.css via your child theme if you wish to alter the breakpoints to something custom.
I would instead recommend just creating custom breakpoint rules that change the column width to 1/1 depending on your setup if you can't achieve what you're looking for via the responsive font sizing options available.
For example, here's a CSS rule that would adjust columns set to 1/3 width to be 1/1 on small desktop displays:
@media only screen and (max-width: 1200px) { .vc_col-sm-4 { width: 100%; } }Hi ThemeNectar,
Thanks for the suggestion. CSS maybe not, but SCSS certainly does allow variables anywhere. And in some other themes this is no issue, breakpoint settings are offered in the backend. Just like Salient now has it for the header.
Meanwhile I added some CSS for the element that I had the greatest problem with, so for me it's ok for now.
Best, Ralf
I purchased the theme today and came here to try to find out how to use SCSS with it, but after reading these comments it seems like it's not even possible!?
If that's the case, is there any way for me to load the Salient WP Bakery templates into another template of mine?
Hey MediaV7,
Please open your own ticket in regard to the new topic so that we can assist you.
Thanks in advance