Header Menu Line

[kitc]

Hi I’m having some issues with the menu.

I have used this piece of code to bring up the dropdown menu:

.navbar-nav>li>.dropdown-menu {
margin-top: 0;
border-radius: none;
font-size: 12px;
margin-top: -20px;

This is working.

However I also need the blue line above the menu items to be lower.
At present there is some space.

I was told to use this peice of code:

.kleo-main-header .nav > li.active > a, .kleo-main-header .navbar-collapse>ul>li>a:hover {
line-height: 40px !important;
}

I have tried this code together with the first code however there seems to be an error and the dropdown menu moves lower whenever I hover over it.

Is it possible to use both peices of code but still get the blue lines above the menu items to be slightly lower.

This is the staging environment: http://staging.kitc-solutions.co.uk/kgn/

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

Try this css snippet and tell me if it’s ok.

COPY CODE

.kleo-main-header .navbar-collapse > ul > li > a, .header-banner {
  line-height: 50px !important;
}

.navbar-nav>li>.dropdown-menu {
  margin-top: 0 !important;
}

.kleo-main-header .nav > li.active > a {
  box-shadow: inset 0px 1px 0px 0px #00b9f7;
}

.kleo-main-header .nav > li > a:hover {
  box-shadow: inset 0px 1px 0px 0px #e5e5e5;
}

You can add this CSS snippet to Wp-Admin -> Theme Options -> General settings -> Quick CSS area or in Kleo Child via FTP in this path wp-content/themes/kleo-child/style.css (The kleo child needs to be activated )

Regards

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[kitc]

Nope it still not as I need it. Blue line is stuck at the top of the header. I need this lower and the dropdown menu still moves when I hover over it.

[Radu]

Now the line appears bottom, it’s ok ?

COPY CODE

.kleo-main-header .navbar-collapse > ul > li > a, .header-banner {
  line-height: 50px !important;
}
 
.navbar-nav>li>.dropdown-menu {
  margin-top: 0 !important;
}
 
.kleo-main-header .nav > li.active > a {
  box-shadow: inset 0px -2px 0px 0px #00b9f7 !important;
}
 
.kleo-main-header .nav > li > a:hover {
  box-shadow: inset 0px -2px 0px 0px #e5e5e5 !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts