Special characters for Theme Options - Custom CSS field

Dazzling
1

Hi

Using the Dazzling theme and WordPress 4.0.1 and wanting to add a bit of custom CSS to change the navigation menu backgrounds, this includes a number of > characters, when I add that the custom CSS and save it those > characters become >

What can I do about this…?

Thanks!

2

These characters are for very specific uses cases and you are not obligated to use them for this theme. There might be some use cases when it is not acceptable as it will target more elements than it should but for this theme you can live without them.

3

Hi

Thanks for the reply…

I wanted to copy and paste some CSS I found in the support forum to change the background colour of the navigation section from the default green to something else.

So, if I can’t copy and paste in the > character how can I effect a change on the navigation background?

Glenn

4

Glenn,

Please post code you are trying to use and I will update it for you.

5

I found this add pasted into the Custom CSS, but when I saved it the > characters are broken…

#main-nav a:hover, #main-nav ul li.current-menu-item a, #main-nav ul li.current_page_ancestor a, #main-nav ul li.current-menu-ancestor a, #main-nav ul li.current_page_item a, #main-nav ul li:hover > a, #main-nav li:hover > a, #main-nav ul ul :hover > a, #main-nav a:focus {
    background-color: transparent !important;
    color: #ddd !important;
    -webkit-box-shadow: none;
    box-shadow: none;
}
6

We have to start this thread over.

The code you provided is for Travelify theme and of course it is not going to work for Dazzling theme even when encoding would work properly.

Are you sure that you can’t achieve these changes via Appearance - Theme Options - Other - Header or maybe Appearance - Theme Options - Main - “Element color on hover”?

If not, please post your website URL and will try to help you from there.

7

Hi

There appears to be no way to change the color behind the navigation links using the Theme Options.

Theme Options - Other has only Custom CSS in it, no Header options.

Theme Options - Header has control over the entire navigation / header background color only

Theme Options - Main - 'Element color on hover effects only links and ‘buttons’ in the editor area, not the navigation links.

Test site is here - http://lab.colour-mad.co.uk

Thanks

8

This code will help you to replace menu item color on hover and this code can be used via Theme Options - Other - Custom CSS.

.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:hover, .navbar-default .navbar-nav .active a:focus, .navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li a:focus, .navbar-default .navbar-nav .open a, .navbar-default .navbar-nav .open a:hover, .navbar-default .navbar-nav .open a:focus, .dropdown-menu li a:hover, .dropdown-menu li a:focus, .navbar-default .navbar-nav .open .dropdown-menu li a:hover, .navbar-default .navbar-nav .open .dropdown-menu li a:focus {
  background: #f00;
}

Let me know if this is what you were looking for.

I have used red color as an example but you can change it to any color you want.

9

Perfect, thank you.

10

YESSSSS! Aigars. thank you. hours saved.