Quark Theme change color of navigation

Support Themes & Styling
1

Hi, i use the Quark Theme and try to change the blue color in the navigation text. 32
I learned that i could use the custom.css to change for example the background color of the website.
I don’t know, what i have to write in the custom.css to change the blue color in the navigation bar for the whole website and for the mobile menu.

Thanks in advance :slight_smile:

2

You will need to target the link tag using CSS.

.navbar .btn-link {
   color: your-favorite-color;
}
3

Hello,

I have the same problem as above : when I hover or when i’m on a page, the link is blue. When i tried to make the solution proposed in my custom.css there is no change.
I have also tried in changing the class headers link (with hover) but again no change.

Do you have an idea ?

Thanks for you time :slight_smile:

4

@lexouN, I’m afraid aforementioned solution will not work when using the Quark theme…

To make style changes to Quark, you can add code to file ‘/user/themes/quark/css/custom.css’

  • For menu items displayed on screens larger then 840 pixels (expanded menu)
    • To change the default colour of menu items add the following:
      #header .dropmenu ul li a {
  color: red;
}
    • To change the colour of menu items with active, focus and hover add the following:
      .dropmenu ul li a.active, 
.dropmenu ul li a:focus, 
.dropmenu ul li a:hover {
  color: yellow !important;
}
  • For menu items displayed on mobile (collapsed menu)
    • To change the default colour of menu items add the following:
      .treemenu li a {
  color: red;
}
    • To change the colour of menu items with active, focus and hover add the following:
      .treemenu li a.active,
.treemenu li a:focus,
.treemenu li a:hover {
  color: yellow!important;
}

There are more roads that lead to Rome and this is one of them…

Hope this helps!

2 Likes
5

Thanks ! You’re a CSS magician. I wouldn’t find it myself.

Great road you indicate :slight_smile: