CSS help to make the secondary (widget menu) look and act more like the main menu

I have purchased a theme and would like to make the sidebar menu look and act like the main menu. I do want it to stay vertical but have the same box and pop out sub menus. If any CSS experts could assist, that would be awesome. I have tried doing it and have not succeeded.

  • Nazmul H. Rupok

    Hi Deborah

    Hope you are doing great today. If you could provide your site URL, I can try to tailor some code for your site. However if you want sub menu pop-up or any other effect on sub menu then it might not be possible with CSS only, instead you will need to modify the structure with Child Theme. But I can help to achieve the other cosmetic changes I believe. :slight_smile:

    Let's provide your URL and point us the changes you are trying to achieve.

    Have a nice day. Cheers!
    Nazmul

  • Nazmul H. Rupok

    Hi Deborah

    Hope you are doing well. It's not really 100% possible to achieve the same functionality here. Simply because the submenu will be hidden since the widget area is small. You can try this CSS and see the issue :

    .widget.widget_nav_menu {
    	background-color: #2196f3;
    }
    
    .widget.widget_nav_menu ul > li {
    	padding: 10px 0 !important;
    }
    
    .widget.widget_nav_menu ul > li > a {
    	color: #fff;
    }
    .widget.widget_nav_menu ul > li .sub-menu a {
    	color: #2196f3;
    }
    .widget.widget_nav_menu ul.sub-menu {
    	display: none;
    	position: absolute;
    	left: 0;
    	right: auto;
    	background-color: #fff;
    	z-index: 99;
    	padding: 10px;
    	box-shadow: 1px 1px 0 rgba(0,0,0,0.05),-5px 5px 8px rgba(0,0,0,0.05);
    	width: 95%;
    	height: 0;
    	transition:
    }
    .widget.widget_nav_menu ul > li:hover ul.sub-menu {
    	display: block;
    	height: auto;
    }

    So I'd suggest something like this instead :

    .widget.widget_nav_menu {
    	background-color: #2196f3;
    }
    
    .widget.widget_nav_menu ul > li {
    	padding: 10px 0 !important;
    }
    
    .widget.widget_nav_menu ul > li > a {
    	color: #fff;
    }
    .widget.widget_nav_menu ul > li .sub-menu a {
    	color: #2196f3;
    }
    .widget.widget_nav_menu ul.sub-menu {
    	display: none;
    	background-color: #fff;
    	z-index: 99;
    	padding: 10px;
    	box-shadow: 1px 1px 0 rgba(0,0,0,0.05),-5px 5px 8px rgba(0,0,0,0.05);
    	width: 95%;
    	height: 0;
    	transition:
    }
    .widget.widget_nav_menu ul > li:hover ul.sub-menu {
    	display: block;
    	height: auto;
    }

    That's all I can offer for your current setup out of the box.

    Have a nice day. Cheers!
    Nazmul

  • Whitney

    This helped me out a lot! I ended up using

    .widget.widget_nav_menu {
    	background-color: #1A78C2;
    }
    
    .widget.widget_nav_menu ul > li {
    	padding: 10px 0 !important;
    }
    
    .widget.widget_nav_menu ul > li > a {
    	color: #fff;
    }
    .widget.widget_nav_menu ul > li .sub-menu a {
    	color: #2196f3;
    }
    .widget.widget_nav_menu ul.sub-menu {
    	display: none;
    	background-color: #fff;
    	z-index: 99;
      padding: 10px;
    	box-shadow: 1px 1px 0 rgba(0,0,0,0.05),-5px 5px 8px rgba(0,0,0,0.05);
    	width: 95%;
    	height: 0;
      transition: all 200ms ease-in-out
    }
    
    .widget.widget_nav_menu ul > li:hover ul.sub-menu {
    	display: block;
    	height: auto;
      z-index: 1;
      position: relative;
    }

    Thank you so much! It is not perfect but I will continue to improve it. Just trying to make everyone happy... :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.