Display sub-items menu while hover the main menu

1
Hi, I need to show a subitem menu’s while hover the menu in the top bar. Is that possible? If yes can you guide me.
asked
1 answers
5

Hi Thangaselvan,

To achieve this you have to add some custom styling to navigation. To add custom styling the best way is to;

  • Install or open and setup Calypso
  • Go to your project directory > ‘\theme\styles\web\sass\app’
  • Create a new folder for your widget or UI  resource (in your case this will be ‘Widgets’) 
  • Add a new file under your new folder (in your case filename will be ‘_navigationbar.scss’). You can have a look at available widget filenames by navigating to project directory > theme > styles > web > sass > core > widget.  
  • Open _custom.scss from app folder and import newly added file, (in your case, add @import "Widgets/navigationbar" and save it
  • Go to newly created file and add required SCSS code and save it so that Calypso compiles the code. (in your case go to _navigationbar.scss add below suggested code and save it)

 

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

 

Hope this helps!

answered