New to the community? Start here

Upfront Theme Menu Colours for rollover. Where do I access them?

I have used the colour editor in the Theme settings to change the colour of the menu and other items. However now the menu items display the old/default colour on rollover or when selected.
Where do access the controls for this setting/colour?

Predrag Dubajic
- Support: Earn your WPMU DEV membership
- 3,185 pts: Hero points 24,640 pts: Rep. points LEVEL 30
Hey @Alex,

Hope you're doing well today :slight_smile:

You will need to add new style to your menu to accomplish this.
You can do that by hovering on your menu while in Upfront editor mode and clicking on settings button (little gear icon), go to CSS Styles and click on Add New styles (see first screenshot attached).

Now click on menu item hover to add correct class and assign color attribute to it (see second screenshot attached)

Your code should look something like this:
```
div[data-style='horizontal'] ul.menu > li.menu-item:hover > a, div[data-style='vertical'] ul.menu > li.menu-item:hover > a {
    color: #000;
}
```
Save the changes and that should be it.

Let us know if you need more help with this.

Best regards,
Predrag
Alex
- The Incredible Code Injector: Earn your WPMU DEV membership
- 7 pts: Hero points 289 pts: Rep. points LEVEL 5
Thanks for that Predrag
(this Upfront is very good but is taking some getting used to!)

How would/could I change the text colour on the rollover/selected item?

Cheers

AJ
Alex
- The Incredible Code Injector: Earn your WPMU DEV membership
- 7 pts: Hero points 289 pts: Rep. points LEVEL 5
I've just tried to do it using your instructions and it strips out all existing formatting. Does this mean I have to create a whole new menu system? Is it not possible to just edit the CSS for 'main-nav'?

Cheers

AJ
Alex
- The Incredible Code Injector: Earn your WPMU DEV membership
- 7 pts: Hero points 289 pts: Rep. points LEVEL 5
I have just looked at the responsive menu and that is also retaining the default colour. (see attachment)

Have I amended the colours in the wrong way? I used Theme Settings through the Upfront editor. (see second attachment)

From the instructions and descriptions I have read it gives the impression that all elements are linked sot that changing colour palette is simple?

Cheers

AJ
Alex
- The Incredible Code Injector: Earn your WPMU DEV membership
- 7 pts: Hero points 289 pts: Rep. points LEVEL 5
Missing files...
Predrag Dubajic
- Support: Earn your WPMU DEV membership
- 3,185 pts: Hero points 24,640 pts: Rep. points LEVEL 30
Hi @Alex,

Upfront does have a bit learning curve to get used to, but once you get pass that you should be able to create pretty much anything.

There are color pickers included in the theme to address some main parts of the theme, paragraphs, headings, links,... but some parts should still be changed using CSS.

Would you mind allowing support access I can check why above solution didn't work for you?
To enable support access you can follow this guide here:
https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

Best regards,
Predrag
Alex
- The Incredible Code Injector: Earn your WPMU DEV membership
- 7 pts: Hero points 289 pts: Rep. points LEVEL 5
Hi Predrag

Yes that is fine. I have granted access.

I just assumed that because the colour picker changed the menu colour (which was what I was attempting to do) it would therefore have just followed on to the rollover elements and the responsive menu colours too?

I just have to pop out of the office for an hour or so but will be back shortly.

Many thanks

AJ
Predrag Dubajic
- Support: Earn your WPMU DEV membership
- 3,185 pts: Hero points 24,640 pts: Rep. points LEVEL 30
Hey @Alex,

First let me apologize for wrong instructions in previous comment, you need to click on edit icon next to current style instead of adding new one so you keep all the current styling (screenshot attached).

Now you can scroll to the end of CSS code where I have added code for you that changed the background to your orange logo color and you can now just change the color to anything you want, this is the you need to look for:
```
#page .main-nav ul.menu li:hover a, #page .main-nav ul.menu li.current-menu-item a, #page .main-nav ul.menu li.current-menu-ancestor a {
    background: #F68B20;
}
```
Best regards,
Predrag
Alex
- The Incredible Code Injector: Earn your WPMU DEV membership
- 7 pts: Hero points 289 pts: Rep. points LEVEL 5
Hi Predrag

I have only just had opportunity to implement this as i have been away on holiday. I seem unable to edit or amend the 'main-nav' css style. Is this usual? Whatever changes I attempt to make to it do not stay and I an still unable to change the default menu colour under responsive behaviour (see attached files)

Is there any other way to access and edit the css other than through the Upfront editor?

Thanks

AJ
Alex
- The Incredible Code Injector: Earn your WPMU DEV membership
- 7 pts: Hero points 289 pts: Rep. points LEVEL 5
Sorry I forgot your system does not like .tiff format
Predrag Dubajic
- Support: Earn your WPMU DEV membership
- 3,185 pts: Hero points 24,640 pts: Rep. points LEVEL 30
Hi AJ,

Well, this is strange since I added the code myself to your navigation and it was working then, not sure what changed in the meantime and if you could grant support access again I would be happy to have a look.

Also, you can always go to theme settings and add additional css there that will be applied on the entire site. The code from attached image is just an example :slight_smile:

Best regards,
Predrag
Alex
- The Incredible Code Injector: Earn your WPMU DEV membership
- 7 pts: Hero points 289 pts: Rep. points LEVEL 5
Hi Predrag

I am kind of glad you are as confused as I am (thought I was going mad)

Just so you know I have tried different browsers, changed access rights to the theme directory to 777, switched themes of and on and logged out and back in (numerous) times to ensure that it was some other issue.

It does not matter what I do I am unable to save ANY amendments to the 'main-nav' to change the colour under responsive behaviour (still get the default teal colour)

Support access has been granted so hopefully you will be able to get to the bottom of the issue. The colour I am attempting to set the back ground to is #414346 with rollover of #f57503. Obviously these are already set for the main site, it's just the responsive drop down that I am unable to change.

Thanks

AJ
Adam Czajczyk
- Support Gorilla: Earn your WPMU DEV membership
- 3,581 pts: Hero points 20,947 pts: Rep. points LEVEL 30
Hey AJ,

I hope you're well today!

I took a liberty of accessing your site and tried to customize the "responsive menu" for you. However, I wasn't able to save the custom CSS also.

As for colors itself. The "responsive" menu is so called "burger" menu and I found out that the CSS rules for this (you can find in the same CSS code editor as previous code, just scroll down until you find "burger") were set to default. Changing these would affect the "small screen" menu.

That said, I think I'll include my colleague @Predrag Dubajic here (who's already been working on this with you) and consult the issue with him as soon as he's back online.

Cheers,
Adam
Alex
- The Incredible Code Injector: Earn your WPMU DEV membership
- 7 pts: Hero points 289 pts: Rep. points LEVEL 5
Thanks for your input Adam, much appreciated.

It is the 'burger' settings that I have attempted to edit, but as you confirmed any changed are unable to be saved? (I'm kinda glad it's not just me)

I look forward to hearing back with a resolution.

Cheers
Predrag Dubajic
- Support: Earn your WPMU DEV membership
- 3,185 pts: Hero points 24,640 pts: Rep. points LEVEL 30
Hi @Alex,

It looks like support access has expired, could you please re-grant it and keep it opened until we figure this one out?

Best regards,
Predrag
Alex
- The Incredible Code Injector: Earn your WPMU DEV membership
- 7 pts: Hero points 289 pts: Rep. points LEVEL 5
Access granted Predrag
Predrag Dubajic
- Support: Earn your WPMU DEV membership
- 3,185 pts: Hero points 24,640 pts: Rep. points LEVEL 30
Hey AJ,

Thanks for granting access, I did some testing on your site and I also wasn't able to make the change in the menu CSS but I have added this code to your Global CSS which should do the trick for now:
```
#page .main-nav div[data-style="burger"] ul.menu li a,
#page .main-nav div[data-style="burger"] ul.menu {
    background: #414346;
}

#page .main-nav div[data-style="burger"] ul.menu li a:hover {
   background: #f57503;
}
```
Do you have any info on when this issue started to happen so we can try pinpoint the cause of it?

Best regards,
Predrag
Alex
- The Incredible Code Injector: Earn your WPMU DEV membership
- 7 pts: Hero points 289 pts: Rep. points LEVEL 5
Hi Predrag

I could only say that I was aware of the issue on the day I continued to correspond with you about it, which was Thursday 25th. I couldn't be sure if it was the same previously as I had been away on holiday, so hadn't really looked at it.

I'm happy with the work around that you have done for now, many thanks, but obviously I assume we need to get to the bottom of this in the long run.

Obviously I have extended the support access but if it needs extending again just let me know.

Many thanks

AJ

PS. Just out of interest how do/can I access the global css? Is this done through the Upfront editor?
Alex
- The Incredible Code Injector: Earn your WPMU DEV membership
- 7 pts: Hero points 289 pts: Rep. points LEVEL 5
Hi Predrag. Your solution appears to have caused an issue with the menu that I'd just resolved earlier?

I had set a new region and different menu for the homepage then hidden the global one just on that page. Now they are both appearing?
Predrag Dubajic
- Support: Earn your WPMU DEV membership
- 3,185 pts: Hero points 24,640 pts: Rep. points LEVEL 30
Hi AJ,

Double menus were visible to me as soon I opened your site, I thought it was something you added for testing purposes and didn't made any changes to that.

Global CSS is accessed from theme settings as I mentioned in one of my comments above:
https://premium.wpmudev.org/forums/topic/upfront-theme-menu-colours-for-rollover-where-do-i-access-them#post-904878

Best regards,
Predrag
Alex
- The Incredible Code Injector: Earn your WPMU DEV membership
- 7 pts: Hero points 289 pts: Rep. points LEVEL 5
I didn't think you would have. Just wasn't sure if the code you had added would have altered it as they were working before? I'm even more confused now as the second menu disappeared without me touching it!?

Feel's like I have a ghost in the system, lol.

AJ
Predrag Dubajic
- Support: Earn your WPMU DEV membership
- 3,185 pts: Hero points 24,640 pts: Rep. points LEVEL 30
Hey AJ,

Looks like the ghosts are still working full time as I see only one menu at your site :slight_smile:

Code I added addresses only colors and shouldn't affect visibility of second menu.

If you do encounter this issue with double menus again could you take a screenshot of console error (if any) so we try pinpointing the cause of it?

Best regards,
Predrag
Alex
- The Incredible Code Injector: Earn your WPMU DEV membership
- 7 pts: Hero points 289 pts: Rep. points LEVEL 5
Hi Predrag

Not sure if you'll be able to help in this instance but I am attempting to get this double menu sorted... again. Full detail of the original issue is here https://premium.wpmudev.org/forums/topic/different-menu-for-homepage-only?replies=7#post-907155

But this is what I am trying to achieve (last post)

"I'm hoping someone... anyone can help resolve this issue for me as it is becoming beyond frustrating!

I sorted it, the resolution lasted for an hour or two, then (somehow) whilst sorting out the colour on the responsive behaviour for main-nav it stopped working?!

On the homepage there are 2 nav's (Header & hp-header). ALL I am trying to do is hide (set property to not visible) the Header region on the homepage only.

No matter where I place the relevant code the Header region stays visible on the homepage at ALL times.

Please, please help as this seems like such a minor thing that I have already had working once, but that does seem to just be controlled by 'higher powers' or 'ghosts in the system'.

I am aware of an issue that the main-nav css can not be written to/saved but Predrag is dealing with this and has implemented a work around, however I am simply attempting to hide the region, so I don't think that would be the cause.

Thanks in advance"

Not sure if this is something you could shed any light on Predrag?

Any news on the main-nav not saving issue?
Predrag Dubajic
- Support: Earn your WPMU DEV membership
- 3,185 pts: Hero points 24,640 pts: Rep. points LEVEL 30
Hi Alex,

I just checked your CSS and there was a bracket missing and element ID had uppercase letter, when I changed that it should all be good now with the double menus. See screenshot attached below.

The main-nav not saving looks like burger menu issue, I have moved the CSS that contains div[data-style="burger"] to your main CSS and it should be good now.
I'm going to report this issue to the developers.

Can you please confirm if everything is working now?

Best regards,
Predrag
Alex
- The Incredible Code Injector: Earn your WPMU DEV membership
- 7 pts: Hero points 289 pts: Rep. points LEVEL 5
Oh Predrag... you are a superstar! Thank you eternally!

I think I'd been looking at it for too long and was frustrated that it just 'stopped' working.

Thank you kindly :smiley:

Have a great day
Predrag Dubajic
- Support: Earn your WPMU DEV membership
- 3,185 pts: Hero points 24,640 pts: Rep. points LEVEL 30
Glad to hear we got it sorted out :slight_smile:

I have reported the issue with menu not saving to the developers so they can see what could be causing it.

Just one suggestion, try using text editor like SublimeText, NetBeans or anything similar that will show your CSS formatting nicely before you paste it into Upfront, it's a step more but you will clearly see if there are any mistakes in code :slight_smile:

Best regards,
Predrag
Alex
- The Incredible Code Injector: Earn your WPMU DEV membership
- 7 pts: Hero points 289 pts: Rep. points LEVEL 5
I use Coda2, but because it worked before I didn't check it thoroughly.

Thanks again anyway Predrag