The menu should be collapsible and appear underneath

Support
#1

Dear Themeco Team,

My menu looks like in screenshot_1.
Is there a way to have a menu bar like in screenshot_2?

The menu should be collapsible and appear underneath (Like a sort of list). Is there some CSS I could edit
I hope you can help me.

My Menu CSS is:

/*Menü*/

.x-navbar .x-nav-wrap .x-nav > li > a {
    font-size: 14px !important;
    color: #000000 !important;
}


.x-navbar .x-nav > li > a:hover {
color: #fec905 !important;
}


.x-navbar .sub-menu > li > a:hover {
color: #fec905 !important;
}


.x-navbar .sub-menu > li > a {
color: #000000 !important;
}


.x-navbar .x-nav > li > a , .x-navbar .x-nav > li.sfHover > a, .x-navbar .x-nav > li.current-menu-item > a {
    box-shadow: 0 2px 0 0 #fec905 !important;
}


.x-navbar {
    box-shadow: 
      -webkit-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.75);
box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.75);
}

Thank you for your good support

Best regards Patrick

#2

Hi Patrick,

Something like this: https://screencast-o-matic.com/watch/cbQrfII0Fr

.masthead-inline .x-navbar.x-navbar-fixed-left .desktop .sub-menu {
    position: relative;
    left: 20%;
    right: 0;
}
.masthead-inline .x-navbar.x-navbar-fixed-left .desktop .sub-menu .sub-menu {
    left: 0;
}

For more guidance, check CSS positioning here. See dev tools too here.

#3

Hey Lely,

Thanks for you quick help! Exactly what i mean. It works perfect!

Is der also a CSS code for the width of the submenu?

I already try this:

.masthead-inline .x-navbar.x-navbar-fixed-left .desktop .sub-menu {
position: relative;
left: 0%;
right: 0;
width: 120px !important;
}
    .masthead-inline .x-navbar.x-navbar-fixed-left .desktop .sub-menu .sub-menu {
        left: 0;
    }

But the menu don´t get smaller than 150 px.

#4

Hello There,

It’s good to know that it works out for you. To adjust the width, please have your code updated and make use of this code instead:

.masthead-inline .x-navbar.x-navbar-fixed-left .desktop .sub-menu {
    position: relative;
    left: 0%;
    right: 0;
    min-width: 200px !important;
    width: 210px !important;
}

Please let us know if this works out for you.

#5

Thanks a lot, everything works fantastic!! I can always say it again and again: very well support!

#6

You’re most welcome and we’re glad we’re able to help you :wink:

#7

Hi There,

I have created a new sub-item in my menu. It is displayed incorrectly. Do you can help me out?

The menu should also be foldable, so that everything appears among each other.

My CSS looks like this:

/*Menü*/

.masthead-inline .x-navbar.x-navbar-fixed-left .desktop .sub-menu {
position: relative;
left: 0%;
right: 0;
width: 120px !important;
}
.masthead-inline .x-navbar.x-navbar-fixed-left .desktop .sub-menu .sub-menu {
left: 0;
}


.masthead-inline .x-navbar.x-navbar-fixed-left .desktop .sub-menu {
position: relative;
left: 0%;
right: 0;
min-width: 200px !important;
width: 210px !important;
}


.x-navbar .x-nav-wrap .x-nav > li > a {
font-size: 14px !important;
color: #000000 !important;
}


.x-navbar .x-nav > li > a:hover {
color: #fec905 !important;
}


.x-navbar .sub-menu > li > a:hover {
color: #fec905 !important;
}


.x-navbar .sub-menu > li > a {
color: #000000 !important;
}


.x-navbar .x-nav > li > a , .x-navbar .x-nav > li.sfHover > a, .x-navbar .x-nav > li.current-menu-item > a {
box-shadow: 0 2px 0 0 #fec905 !important;
}


.x-navbar {
box-shadow: 
  -webkit-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.75);
box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.75);
}
#8

Hi Patrick,

You’re going to want to modify this piece of code:

.masthead-inline .x-navbar.x-navbar-fixed-left .desktop .sub-menu {
position: relative;
left: 0%;
right: 0;
width: 120px !important;
}
.masthead-inline .x-navbar.x-navbar-fixed-left .desktop .sub-menu .sub-menu {
left: 0;
}


.masthead-inline .x-navbar.x-navbar-fixed-left .desktop .sub-menu {
position: relative;
left: 0%;
right: 0;
min-width: 200px !important;
width: 210px !important;
}

Remember that the last piece of targeting is what your CSS applies to, for instance if you target .sub-menu as the last selector, your CSS is applying to that selector.

You can play about with the values in the inspector, for example if you open Chrome Developer tools, you can inspect the sub menu CSS, change the values, once you’ve found the perfect values you can then use that within your CSS code/modify your existing CSS code.

Thanks!

1 Like