[lankyman26]

Hi. Is there some CSS that would switch the menus to drop down to the right not the left? at the moment, the sub items are not visible as they are off the edge of the screen. This is the site….

https://www.free-attraction-reviews.com/

Thanks!

[minal]

Hello @lankyman26

 

To change the direction of dropdown menus from left to right, please add the below CSS snippets on additional CSS

For Additional CSS Please go to Dashboard >> Appearance >> Customizer >> Additional CSS

@media screen and (min-width: 64em) {
   .site-navigation li:hover>ul, 
   .site-navigation li.focus>ul {
     left: 0;
     right: auto;
   }

   .site-primary-menu ul ul:before {
     left: 12px;
     right: auto;
   }

   .site-navigation ul ul li:hover>ul, 
   .site-navigation ul ul li.focus>ul {
     left: 100%;
     right: auto;
   }

   .site-navigation ul ul .menu-item-has-children>a>.icon, 
   .site-navigation ul ul .page_item_has_children>a>.icon {
     -webkit-transform: rotate(-90deg);
     -ms-transform: rotate(-90deg);
     transform: rotate(-90deg);
   }
}

@media screen and (min-width: 75em) {
   .site-navigation li:hover>ul, 
   .site-navigation li.focus>ul {
     left: auto;
     right: 0;
   }

   .site-primary-menu ul ul:before {
     right: 12px;
     left: auto;
   }

   .site-navigation ul ul li:hover>ul,  
   .site-navigation ul ul li.focus>ul {
     left: auto;
     right: 100%;
   }

   .site-navigation ul ul .menu-item-has-children>a>.icon, 
   .site-navigation ul ul .page_item_has_children>a>.icon {
     -webkit-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     transform: rotate(90deg);
   }
}

On larger screen it seems fine so I made changes on smaller desktop

Hope it works for you !!

Sincerely,

Minal

[Author]

Posts