Pagination Styling (CSS) - css

I am trying to change the colour of my active pagination button from black to the light brown (#a88f4b), but it seems as though I can't get rid of the black. What is it I'm getting wrong here?
http://demo.boxofficeboxing.co.uk/?s=
.eltd-pagination a {
color: #666 !important;
}
.eltd-pagination li.active {
background-color: #a88f4b !important;
}
.eltd-pagination a:hover {
color: #fff !important;
background-color: #a88f4b !important;


This is your line that should modify:
.eltd-pagination ul li a:hover,
.eltd-pagination ul li.active span {
background-color: #a88f4b !important;
color: #fff !important;
}
In you pagination, active li has span in it instead a tag so you had to set style on the span not li like code above. copy/paste code above in your css in very last line.

Related

How to change the Bootstrap pagination page-item active border color

I know there are a few posts on the subject but nothing seems to work with the latest Bootstrap.
Here is my css:
.pagination .page-link { background-color:#1d1d1d !important; border: 1px solid grey; }
.pagination { color:black !important; }
.pagination .active { background-color:white !important; color:red !important; }
.pagination > .active > a , .pagination > .active > a:hover, .pagination > .active > a:focus { background-color: grey !important; border-color: grey !important; }
Everything is fine except the active page... how can I change the colors of the text (now white), the background (now black) and most important the default border (blue)?

cant change font color to white in css navbar

i am trying to make the color of my .blou class with a white color this is my nav i gave them a class in my wordpress but the colorseems to not change
this is from the wordpress theme
.nav-menu ul li a {
color: #222;
padding: 10px 15px;
font-size: 15px;
display: block;
font-weight: 600;
}
.nav-menu ul li a:hover {
background-color: #000F3A;
color:white;
}
then i added this `
.nav-menu ul li.blou1 {
background-color: #000F3A;
color:white!important;
}`
for some reason the background does change but not the text color to white please help someone
My Menu Contains
Home|Gallery|Contact|About|Members|Login(.blou1 class)|Register(.blou1 class)
also when i hover over the class blou1 it should remove the background and change the text to black or something

try adding this code snippet instead the snippet you have added, it should work:
.blou1 {
background-color: #000F3A;
color:white!important;
}
.blou1:hover {
color:black;
}

How can I change sub link color on main menu?

I set special CSS for each button on main menu. I want to change sub links in my third button. Theme default set #ccc color for every sub links.
#main-nav ul ul a,
#main-nav .mega-menu-block a {
border: 0 none;
background: none !important;
height: auto !important;
line-height: 1.5em !important;
padding: 7px;
display: block;
margin-right: 0;
z-index: 210;
color: #ccc;
}
I change color to transparent first.
color: transparent !important;
Then I edit my third button class like this:
.ucuncu-nav ul ul a,
.ucuncu-nav.mega-menu-block a {
color: #669900;
}
But it's not changing.

Its not changing because you have important statement on:
#main-nav ul li.current-menu-item a, #main-nav ul li.current-menu-item a:hover {
background-color: transparent !important;
color: #fff !important;
}
Remove it and you should be fine

If you are using a list to display this list. Try with nth-child property like this:
#main-nav ul ul a,
#main-nav .mega-menu-block li:nth-child(3) a div a {
color:orange !important;
}
Hope it helps but the problem is not so clear, because when I see your website the submenu is made by divs and I don´t know if you will place a link there.

.ucuncu-nav.mega-menu.mega-recent-featured .mega-menu-block .mega-recent-post a {
color: blue !important;
}

Navbar modify border / background color on dropdown-menu item on click

I don't understand why I have a blue border when I click on the Item "My account" of a navbar item which opens a dropdown-menu:
So I tried to put all in red with !important like this but with no success:
nav a.nav-account.active {
color: red !important;
background: red !important;
border: 2px solid red !important;
}
Example: http://jsfiddle.net/5o06orcg/1/
It's like it's not .active I have to edit. How to?

You need to make !important border color for selector nav a.nav-account:
nav a.nav-account {
color: white !important;
border-radius: 6px;
margin-left:10px;
margin-top:13px;
line-height:10px !important;
border: 2px solid white !important;
}
http://jsfiddle.net/a1vv9hvf/

Because instead nav a.nav-account.active you need to apply styles to .nav .open > a or .nav .open .dropdown-toggle will work:
.nav .open .dropdown-toggle {
color: red !important;
background: red !important;
border: 2px solid red !important;
}
Jsfiddle-example

Change color of menu item on mouse hover

I am trying to change the color of the menu item to black on mouse hover but after several tries, I am unable to do so. Please guide me. Thanks.
.primary-nav .suppa_menu .suppa_top_level_link.current-menu-item, .primary-nav .suppa_menu .suppa_top_level_link.current-menu-ancestor{
background-color: #FFFFFF !important;
}
.primary-nav .suppa_menu:hover .suppa_top_level_link {
background-color:#FFFFFF !important;
color: #000000 !important;
}
.suppa_item_title:hover .suppa_menu a:hover .suppa_item_title:hover{
color: #000000 !important;
}

In primary-nav.css, the color of the text on hover is currently set as:
.primary-nav .suppa_menu:hover .suppa_top_level_link .suppa_item_title {
color: #ffffff;
}
If you change this to:
.primary-nav .suppa_menu:hover .suppa_top_level_link .suppa_item_title {
color: #000000 !important;
}
it should work.

Resources