I noticed a problem with the drop-down menu ^when I reduced the size of the window. The problem also occurs on mobile devices. The drop-down menus overlap the categories:

How can I solve this?

Thanks.

URL: http://www.paleoflaneur.com

Please find and remove height: 80px; from this code:

.x-navbar .x-nav > li {
  height: 80px;
  padding-top: 0;
}

Hope it helps.

#1: The spacings in the Navbar are not good anymore
#2: The breadcrumbs’s spacing is not good either.
#3: The drop down menu should start direct underneath the navbar.

I’ve done the following image to show you how it is now:

X should be equal to Y
Z should be equal to 0

I have the following code in my CSS (I’ve already removed the ‘height: 80px;’ to fix the drop down menu problem):

.x-navbar-inner {
    min-height: 80px;
}
.x-navbar .x-nav > li {
    height: 80px;
    padding-top: 0;
}
body.x-navbar-fixed-top-active .x-navbar-wrap {
  height: 80px;
}

Thanks.

Please reduce ‘Navbar Top Height’ and ‘Navbar Top Link Alignment’ under Customize -> Header.

Hope it helps.

I followed your instruction and it solves the problems #1 and #2. How can I solve the problem #3 (problem with the spacing of the drop-down menu, which is even worst now)?

I still have this code in my CSS:

.x-navbar-inner {
    min-height: 80px;
}
.x-navbar .x-nav > li {
    padding-top: 0;
}
body.x-navbar-fixed-top-active .x-navbar-wrap {
  height: 80px;
}

Thanks for your help.

To solve #3, please add the following code in your Customizer via Appearance > Customize > Custom > CSS:

.x-navbar .desktop .x-nav > li ul {
  top: 50px;
}

Adjust the value if needed. Let us know how this goes!

It looks like this now:

When I increase (top: 80px), the drop down menus show as I want them to be, but the problem is that you can not access them. They disappear as soon as you try to select one of them:

What’s the solution to fix this?

My next question concerned the menu by a small size window. The menu goes on 2 lines, and it doesn’t look nice as the spacings are not correct:

Ideally, it should look like something similar to this:

How can I fix this?

Thanks for your help!

Please try this code:

.x-navbar .desktop .x-nav > li ul {
  top: 80px;
}
.x-navbar .desktop .x-nav > li > a {
  padding-bottom: 47px;
}
@media (max-width:1298px) and (min-width:979px){

.x-navbar .desktop .x-nav>li>a{
letter-spacing: normal;
}
}
@media (max-width:1160px) and (min-width:1060px){

.x-navbar .desktop .x-nav>li>a{
  padding: 0 1em;
}
}
@media (max-width:1060px) and (min-width:979px){

.x-navbar .desktop .x-nav>li>a{
  padding: 0 0.7em;
}
}

Hope it helps.

Here is how it looks like (first with the bigger device (OK) and then with the smaller:

The code I use is the following:

.x-navbar .x-nav > li {
    padding-top: 0;
}
body.x-navbar-fixed-top-active .x-navbar-wrap {
  height: 80px;
}
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
  box-shadow: none;
}
.x-navbar .desktop .x-nav > li ul {
  top: 80px;
}
.x-navbar .desktop .x-nav > li > a {
  padding-bottom: 47px;
}

@media (max-width:1298px) and (min-width:979px){

.x-navbar .desktop .x-nav>li>a{
  letter-spacing: normal;
}
}
@media (max-width:1160px) and (min-width:1060px){

.x-navbar .desktop .x-nav>li>a{
  padding: 0 1em;
  padding-top: 32px;
  padding-bottom: 47px;
}
}
@media (max-width:1060px) and (min-width:1000px){

.x-navbar .desktop .x-nav>li>a{
  padding: 0 0.7em;
  padding-top: 32px;
  padding-bottom: 47px;
}
}
@media (max-width:1000px) and (min-width:979px){

.x-navbar .desktop .x-nav>li>a{
  padding: 0 0.6em;
  padding-top: 32px;
  padding-bottom: 47px;
}
}

Another problem is when I start to have the code in the CSS of the Child Theme, it doesn’t work anymore. I have it on the customizer CSS at the moment. Do you know how to fix this problem? I would like to have all my css in the Child Theme. (I noticed this process for different part of my CSS, but I had no problem with some other parts of the CSS)

Thanks for your help!

Looks like it’s okay on my end! I’m not getting the same as your second screen shot.

Have you done it already? Good job!

Thanks!