Docs

[jensjakobsen]

Hi

I’m using then latest WordPress and the latest Theme X.

On my test site (http://kvikkastrup.net.virker.nu) I want the navbar to have other link colors, from the rest of the site.

Under Appearance > Customize > Typography I set the link colors to black and blue for hovering. This works fine.
Under Appearance > Customize > Custom > Edit Global CSS I inserted this CSS (in it’s entirety):

/* JJ Navbar color and text color for links */
.x-navbar {background-color: #235371;}
@media screen and (max-width: 979px)
.x-navbar .x-nav-wrap .x-nav > li > a {
color: #ffffff;
  }

/* JJ move header logo to left */
.x-logobar{
text-align:left;
margin-left:30px;  
}

.x-recent-posts .x-recent-posts-content {
    background-color: #fff;
    border-color: #fff;
}

/* JJ header to the left */
.entry-header .entry-title {
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    width: 100%;
}

/* JJ remove border */
.x-recent-posts a {
  border: solid 1px #d0d0d0;
  }
/* JJ Remove borders when using Firefox */
  {
    a:focus, 
a.x-btn:focus, 
select:focus, 
input[type="file";]:focus, 
input[type="radio";]:focus, 
input[type="submit";]:focus, 
input[type="checkbox";]:focus, 
input[type="button";]:focus {
        outline: none !important;
}}

[Christopher]

Hi there,

Please change navbar color unde Customize -> Header -> LINKS – TEXT

If you wish to add custom code, please update your code to :

@media screen and (max-width: 979px){
.x-navbar .desktop .x-nav > li > a {
    font-size: 12px;
    color: #ffffff;
}
}

Hope it helps.

[jensjakobsen]

Thanks for your response, however it had no affect at all – not even the font size – something’s wrong 🙁

Now my CSS looks like this:

/* JJ Navbar color and text color for links */
.x-navbar {background-color: #235371;}
@media screen and (max-width: 979px){
.x-navbar .desktop .x-nav > li > a {
    font-size: 12px;
    color: #ffffff;
}
}

/* JJ move header logo to left */
.x-logobar{
text-align:left;
margin-left:30px;  
}

.x-recent-posts .x-recent-posts-content {
    background-color: #fff;
    border-color: #fff;
}

/* JJ header articles to the left */
.entry-header .entry-title {
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    width: 100%;
}

/* JJ remove border */
.x-recent-posts a {
  border: solid 1px #d0d0d0;
  }
/* JJ Remove borders when using Firefox */
  {
    a:focus, 
a.x-btn:focus, 
select:focus, 
input[type="file";]:focus, 
input[type="radio";]:focus, 
input[type="submit";]:focus, 
input[type="checkbox";]:focus, 
input[type="button";]:focus {
        outline: none !important;
}}

[Rupok]

Hi there,

Your Navbar link color is white and that’s coming through the Customizer. Your code will only work under 979px as you placed this within media query. Also your code has an extra curly brace at the very end.

Now let us know what you are actually trying to accomplish. To change the color for Navbar, you can take off the media query.

Hope this makes sense.

[jensjakobsen]

Hi Rupok, I realise this is getting a bit annoying, though no intentions from my side, just lack of CSS knowledge.

I corrected the extra curly bracket, thanks.

If you take a look at kvikkastrup.net.virker.nu I have also corrected the color issue with the links. However, when I hover over a dropdown link in the header, the values inherits the white font color for links – is it possible to remain to have the white links in the menu, however dropdown links should have other colours?

[Jade]

HI there,

Please add this code in the customizer:

.x-navbar .desktop .sub-menu a {
    color: #566471;
}

Hope this helps.

[Joao]

Hi There,

First of all, you are not annoying at all and don´t feel like that whenever you need help, sometimes the easiet way to explain things is to take a screenshot and make your explanation more visual, but for this time this is not necessary.

Please add the following code to Appereance > customizer > Custom > CSS

.x-navbar .desktop .sub-menu a {
color: ##235371;
}

Hope that helps

Joao

[jensjakobsen]

Thanks! It worked 🙂

[Joao]

Glad to hear it,

Joao

[Author]

Posts