[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 though I know it’s do-able since another site already has the code to be able to do it (except I can’t see the code since it’s hidden).

I’m working on the menu for my site catalyticcolor.com but having problems with the drop down menu going off the page

Can you please provide me with the css code so I can make my dropdown menus right justify instead of left justify? (ie see the menus on LeanneVenier.com to see what I’d like to do on catalyticColor.com)

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 about the sub and sub-sub menus going off the page 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 like it is on leannevenier.com) 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).

For a little more clarity, you can see this example below:

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! 🙂

[RadModerator]

Hi there,

Thanks for posting in.

Yes it’s possible, you can append this css to the end of your existing css.

.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);
}

Cheers!

[leannevenierParticipant]

You’re amazing! That worked perfectly! Thank you!!

Another tech support person that I’d been trying to work for the past few days to resolve this issue kept giving me code that wasn’t working (and my site is live so I needed to get the problem resolved as quickly as possible.). You came up with the solution immediately which is great! 🙂

All my menus now stay on the page except for one sub-sub-sub menu item (which I probably just need to shorten a bit).

One additional related question to this issue: Is there a way to make my main top navbar Titles appear closer together? (ie so that the word HOME is closer to the next top-menu header CREATIVE FLOW TRAINING, which would also be closer to the next top-menu header SCIENCE, etc (ie so the gap space between the top navbar-menu titles is smaller, like the way it is on http://LeanneVenier.com)?
The site that I want to make the navbar menu items closer is this other one (with the dropdown issue that’s now fixed): http://CatalyticColor.com

Thank you for your fabulous support!

By the way, in case you’re curious, this is the code that I was given from the other X tech person that didn’t solve the drop-down menu problem. I sent him your css code that worked so he’d know how to fix the problem in case the issue ever comes up again:

1st suggestion (didn’t work at all, but this was the closest he got to the code you gave me – he was just missing the second part):

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

2nd suggestion (didn’t work either)

.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
}

3rd suggestion (also didn’t work)

.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;}

[RadModerator]

Hi there,

Glad it works 🙂

About your other question, there is an option in customizer that you could use to control that spacing. It’s at Admin > Appearance > Customizer > Header > ALIGNMENT. It would be Navbar Top Link Spacing (px) 🙂

Cheers!

[leannevenierParticipant]

Oh, thanks! I knew I had come across that setting somewhere when I modified the leannevenier.com navbar, but I couldn’t recall where it was! Very helpful! Thank you!
Have a great day! 🙂

[RadModerator]

You’re soo much welcome 🙂

[Author]

Posts