[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

[lankyman26]

Hi. Thanks for the CSS. I copied and pasted into customiser>additional CSS, but hasn’t made any difference however. I’m using a laptop and the menu appears under the site title. So when, you hover over UK you can’t see any of the subpages. Hover on Europe and you can see the main subpages, but not the ones below them. Anything else I can try?

Thanks!

[Author]

Posts