Custom CSS not working since upgrade to version 2.0.2

Hi there,

Can you link me to the site in question?

You can edit the original topic and use the private URL field.

Let me know :)

Hi Leo,

Sorry, I can't as my installation is on my local machine.

Is there any other way that you are aware of that we can do this?

Regards
Greg

Is this what you are trying to do?
https://docs.generatepress.com/article/navigation-dropdown/#opening-specific-sub-menus-to-the-left

Hi Leo,

Yes, that appears to be the correct code. I have a drop down menu at the top far right hand side of the screen that opens partially off screen to the right hand side. The code corrected that problem until I updated to the newest version of GP.

I've been wondering as well whether the next update will cause the same problem. I'm trying to get the website up on a test url so that you can access it.

Regards

The code you posted is a bit different then what's in the documentation page though.

We update the code from time to time so that it works with the updates etc.

Hi Leo,

We've had some trouble with our hosting service but we finally managed to get a test site up and running. How would I edit the original topic in order to add the url? Just give me a little bit of a heads up as to when you wish to look at it so that I can take it out of maintenance mode.

Regards

Just click Edit in the original topic then there is a private URL field.

Can you keep maintenance mode off for now? Sometimes we might not be able to get to it this fast.

Have switched off maintenance mode, and managed to update the call with the url, so the site is now accessible.

Sorry where is the link to your site?

I don't see it in the original topic.

Apologies. I had put it on my profile. Just found the topics edit option - it was very faint and small for me. The products menu is where I'm having the problem.

I'm still seeing this CSS being added:

.dropdown-hover .main-navigation ul ul {
    left: auto;
    right: 0;
}

.dropdown-hover .main-navigation ul ul ul {
    left: auto;
    right: 0;
}

.dropdown-hover .main-navigation .main-nav ul ul li.menu-item-has-children > a {
    padding-left: 0;
    padding-right: 20px;
}

.dropdown-hover .main-navigation ul ul .menu-item-has-children .dropdown-menu-toggle {
    float: left;
    padding-left: 20px;
    padding-right: 15px;
}

.dropdown-hover .main-navigation .children .dropdown-menu-toggle:before, 
.dropdown-hover .main-navigation .sub-menu .dropdown-menu-toggle:before {
    content: "\f104";
}

Can you try this instead?

.main-navigation:not(.toggled) ul ul {
    left: auto;
    right: 0;
}

.main-navigation:not(.toggled) ul ul ul {
    left: auto;
    right: 100%;
}

.main-navigation .main-nav ul ul li.menu-item-has-children > a {
    padding-left: 0;
    padding-right: 20px;
}

.main-navigation ul ul .menu-item-has-children .dropdown-menu-toggle {
    float: left;
    padding-left: 20px;
    padding-right: 15px;
}

.main-navigation .children .dropdown-menu-toggle:before, 
.main-navigation .sub-menu .dropdown-menu-toggle:before {
    content: "\f104";
}

Hi Leo,

Thanks, tried that, doesn't work. I've left it active so that you can see the result - the menu seems to have widened and the sub menu is still opening to the right when it needs to open left.

Can you give this a shot?:

.main-navigation:not(.toggled) ul ul {
    left: auto;
    right: 0;
}

.dropdown-hover .main-navigation:not(.toggled) ul ul li:hover>ul {
    left: auto;
    right: 100%;
}

.main-navigation .main-nav ul ul li.menu-item-has-children > a {
    padding-left: 0;
    padding-right: 20px;
}

.main-navigation ul ul .menu-item-has-children .dropdown-menu-toggle {
    float: left;
    padding-left: 20px;
    padding-right: 15px;
}

.main-navigation .children .dropdown-menu-toggle:before, 
.main-navigation .sub-menu .dropdown-menu-toggle:before {
    content: "\f104";
}

Hi Leo,

Thanks it is now working. Will this happen again when we update to a newer version of Generate Press in the future?