How do I adjust the point that the menu changes to a hamburger menu?

Hello Movin

How do I adjust the point that the menu changes to a hamburger menu?

I would like it to change earlier because of the length of my menu.

I had a similar issue to the below

https://colorlibsupport.com/t/menu-sizing-across-devices/

Thanks again

site is graysonneal.com/graysonneal.com

then I will adjust the text logo size by

@media (max-width: 450px){
#page .navbar > .container .navbar-brand {
font-size: 18px;
}
}

Hi @gcneal,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

@media (min-width: 768px){
body #page .navbar-toggle {
    display: block;
}
.navbar-header {
    float: none;
}

body .navbar-collapse.collapse {
    display: none!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}
}

@media (max-width: 850px){
body .navbar > .container .navbar-brand {
    margin: 0;
}

}

@media (min-width: 850px){
  body .navbar-header {
    float: left;
}

  body #page .navbar-toggle {
    display: none;
}

body #page .navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}
}

Change the value 850px in the above code to the window size when you want to display mobile menu.

Best Regards,
Movin

Thank you Movin thats great.

I have adjusted the hamburger menu to the point I need, however it creates an another issue.

When I click on the hamburger menu icon (from the point it changes to the hamburger menu icon to a lesser point, it shows as a vertical menu then changes to a dropdown menu if resized smaller.

Any suggestions?

Thanks again

Hi @gcneal,

I could confirm the issue on my test site.

To resolve this issue try using the following updated code replacing previously provided code.

@media (min-width: 768px){
body #page .navbar-toggle {
    display: block;
}
body .navbar-nav>li,
.navbar-header {
    float: none;
}

body .navbar-collapse.collapse {
    display: none!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}

body .navbar-collapse.collapse.in{
  display: block!important;
}
}

@media (max-width: 850px){
body .navbar > .container .navbar-brand {
    margin: 0;
}
body .nav.navbar-nav {
    float: none;
}
body .navbar-default .navbar-nav > li > a {
    line-height: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}
}

@media (min-width: 850px){
  body .navbar-nav>li,
  body .navbar-header {
    float: left;
}

  body #page .navbar-toggle {
    display: none;
}

body #page .navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}
}

Thanks again Movin thats great.

One further issue tho, if you were able to help.

On the drop down menu, the child menu shows as a box on top of the menu, however I would like to have it expand in the drop down menu, similar to the how sparkling shows.

Any suggestions?

Thanks again

You are most welcome here :slight_smile:

On the drop down menu, the child menu shows as a box on top of the menu, however I would like to have it expand in the drop down menu, similar to the how sparkling shows.

Could you please share the screenshot of it?

Hi Movin

Please see image.

Thanks again

Hi @gcneal,

Thanks for sharing the screenshot.

You have to develop more custom CSS code to achieve this.

Developing custom code for custom functionality is beyond the scope of support that we provide here so we provide limited help here regarding custom code.

If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Colorlib recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5

Best Regards,
Movin

Thanks Movin

It appear to work as intended when 787px or less, it shows the child as part of the menu (on expand).

I changed the 850px to 991/992px which works fine for that and higher.

But in-between 788px and 991px it shows the mobile menu (which I want) but it shows the effects in the dropdown menu of NOT being mobile menu. Hope that makes sense.

Would this be caused by an error in the above code you supplied?

If not I guess I will have to keep searching for the answer.

Thanks again.

But in-between 788px and 991px it shows the mobile menu (which I want) but it shows the effects in the dropdown menu of NOT being mobile menu. Hope that makes sense.

You can resolve this issue by using the below CSS code.



@media (min-width: 768px){

body #page .navbar-toggle {
    display: block;
}
body .navbar-nav>li,
.navbar-header {
    float: none;
}

body .navbar-collapse.collapse {
    display: none!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}

body .navbar-collapse.collapse.in{
  display: block!important;
}
}

@media (max-width: 850px){
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: none;
}
body .navbar > .container .navbar-brand {
    margin: 0;
}
body .nav.navbar-nav {
    float: none;
}
body .navbar-default .navbar-nav > li > a {
    line-height: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}
}

@media (min-width: 850px){
  body .navbar-nav>li,
  body .navbar-header {
    float: left;
}

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}

  body #page .navbar-toggle {
    display: none;
}

body #page .navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}
}


Thanks movin

Thats alot better, its shows as I want above 992px, and below 991px it works better because it appears to be the same format 991px to 0px, but instead of expanding to include the child menu in the dropdown, the child shows on top of the main dropdown menu. How do I include it in the main menu dropdown?

I did change the following “850” to “991” and “none” to “block” because on hover the child menu would not display

@media (max-width: 850px){
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: none;
}

Thanks again

As said earlier developing custom code for custom functionality is beyond the scope of support that we provide here so we provide limited help here regarding custom code.

Please advise if you have more questions.

Have a fantastic day!

Thats ok movin

I thought you might be able fix it because in the standard sparkling theme it expands the sub-menu in the main-menu. Basically it seems something in the above code is removing that function.

But I will try to figure that out myself, if I can.

Thanks for help anyway.

You are always welcome here :slight_smile: