[leannevenierParticipant]

Hi there,

Thanks for all the great support on this Forum!

I have an issue that I wasn’t able to find covered in this forum.

Can you please provide me with the css code so I can make my dropdown menus right justify instead of left justify?

By this, I mean, I’d like to click on a menu tab at the top of my page, and have the right edge of the dropdown menu box align with right edge of that top menu tab with all the submenu text then appearing to the left of that right edge (ie so it’s right justified and the box content appears to the left of the top menu item, with the right edge of the drop down box, aligned with the right edge of the upper menu item)

The default drop down menu currently has the drop down menu box going off to the right (ie the left edge of the drop down box is aligned with the left side of the top menu item – ie, it’s left justified). This is problematic since several of my drop down menu boxes end up going off the page (ie off screen).

You can see what I mean here:

http://catalyticColor.com

I found one other person in this XTheme forum having this same issue along with another one, but the css code that was provided to them didn’t work on my Renew theme.

This is the only CSS code I have so far in my CSS Customizer box (one is for changing the font size of the dropdown menu and the otehr is for increasing the bullet spacing).

.x-navbar .sub-menu a{
font-size:14px;
}

li {
line-height: 1.7;
padding: 8px;
} 

When you provide me with the CSS code for shifting the drop down menu to go off to the left (right justify) instead of the right (left justified as it is now), can you also tell me if it needs to go above or below my current CSS code (I’ve noticed that sometimes placement location of the code in the CSS customizer box makes a difference).

Thank you for your help!! 🙂

[leannevenierParticipant]

ps. I would like this only to take effect on Desktop since on mobile, the current settings for my menu work just fine.

Thank you!

[JadeModerator]

Hi there,

Please add this CSS at the bottom part of the CSS Customizer:

.masthead-stacked .x-navbar .desktop .sub-menu {
    left: auto;
    right: 0;
}

Hope this helps.

[leannevenierParticipant]

Thanks, but that didn’t work at all, unfortunatlye.

Your code made the first dropdown menu align with the right side of the top menu item, but then the subsequent dropdown menus (sub-menus) all still shot off to the right and the background sub-menu boxes were cut in half (ie the text extended beyond the colored background box so it was floating and the next sub-menu still ended up going off the screen.

I’d like ALL the sub-menu boxes including all sub-sub-menus to go to the LEFT not the right. 🙂

So the first dropdown would go to the left (with the right side aligned with the right side of teh main menu header), then, the sub-sub-menu would also go to the left of the first sub-drop down, and the sub-sub-sub menu would also go to the left. Does this make sense?

I’m not sure why your code was cutting the sub-menu & sub-sub-menu boxes in half, either?

You can see an example of exactly what I’d like to do here:

leannevenier.com

On this website, if you put your mouse over the Menu Header titled LEARN, you’ll see a drop down menu appear to the left.

Then put your mouse over the sub-menu title COLOR, HEALING & ART
Another sub-sub-menu will appear to the LEFT

Then put your mouse over the Sub-sub-menu title HEALING EFFECTS OF VENIER’S ART and another sub-sub-sub-menu will appear, again to the LEFT.

This is exactly what I’d like it to do on catalyticColor.com.

Thanks for any help you can provide!

[JadeModerator]

Hi there,

Thanks for the very detailed info.

This should do it:

.masthead-stacked .x-navbar .desktop .sub-menu {
    left: auto;
    right: 0;
}

.masthead-stacked .x-navbar .desktop .sub-menu .sub-menu {
    left: -350px;
    right: auto;
}

.masthead-stacked .x-navbar .desktop .sub-menu .sub-menu .sub-menu {
    left: -260px
}

Hope this helps.

[leannevenierParticipant]

Well, that’s a bit closer. But your code is entirely dependent on my title bars never changing.
When I use that code for example, the header menu titled science brings up the dropdown that is completely separated off to the left (with a big ggap in between the sub menu and the sub sub menu.

Can you figure out a way to make the code match leannevenier.com?

That would be ideal. The code on that site keeps the drop down menus and sub menus touching the edge of the previous dropdown menu (ie it’s coded to be justified to align with the previous drop down menu as opposed to counting pixels in an existing title).

Hopefully this is clear since I couldn’t use that code so I deleted it from my csss customizer.

I basically just want the menu to be able to work no matter how I rename my submenus (which I plan to continue to do).

Thanks for any help you can provide!

[FriechModerator]

Hi There,

You can add this under Custom > CSS in the Customizer.

.masthead-stacked .x-navbar .desktop .sub-menu .sub-menu {left: auto;right: calc(100% + 1.75em);}
.masthead-stacked .x-navbar .desktop .sub-menu .sub-menu .sub-menu {top: -5.25em;}

This would make all the sub-menu appear on the left and touching its parent-menu. But this would not keep all sub-menus touching with the navbar, like the menu on this page http://leannevenier.com/

Hope it helps, Cheers!

[leannevenierParticipant]

hmmm… well that solution didn’t work either (as you said, all the sub menus ended up lined up with the top of the navbar and it looks all wonky).

Since it was taking awhile to get a usable solution and my website is already live, I decided to repost the query to see if someone else had a quick solution and I got this back from another tech support person – this solved the problem completely and does exactly what I wanted it to do.

Thanks for your help, in any case! Really appreciate it! 🙂

I thought you might want to know the code that worked in case the question comes up again. Here it is:

.masthead-stacked .x-navbar .desktop .sub-menu {
left: auto;
right: 0;
}
.masthead-stacked .x-navbar .desktop .sub-menu .sub-menu {
top: -1.75em;
left: auto;
right: calc(100% + 1.75em);
}

(This was your code, so you were getting pretty close 🙂

.masthead-stacked .x-navbar .desktop .sub-menu .sub-menu {left: auto;right: calc(100% + 1.75em);}
.masthead-stacked .x-navbar .desktop .sub-menu .sub-menu .sub-menu {top: -5.25em;}

Thank you!

[RadModerator]

You’re welcome Lean!

[Author]

Posts