Docs

[Pablo F]

Hi Rad,

Thank you very much for your help.

Everything is working good now, but just 2 issues remaining:

1. I see the CSS rules, but the bottom line of the navigation bar is still white/invisible. Maybe we are working with the wrong classes or something.

2. When the navigation bar collapses to the top below 979px width, the company logo is not shown to the left and the nav button to the right below, just the centered navigation button. Could it be fixed like in the attached capture? It´s not necessary when the logo is visible on the top, just when the navigation bar is fixed to the top.

PS: Regarding your redirection issues, I don´t understand what´s happening at your side as I´m logged in in Chrome as you can see in the attached capture.

Thank you one more time.

[Rad]

Hi there,

It’s working on my chrome but redirecting in firefox browser. As long as it works, it should be okay 🙂

Please add this CSS as well,

@media ( max-width: 979px ) {
.x-logobar, .x-logobar-inner, .x-logobar-inner > .x-container,
.x-navbar-wrap, .x-navbar, .x-navbar-inner, .x-navbar-inner > .x-container {
    border-bottom: 0px !important;
    display: inline;
}
.x-nav-wrap.mobile {
    padding: 0px 5%;
    position: relative;
    top: -40px;
    border-top: 2px solid #ddd;
}

.x-btn-navbar {
    float: right;
    margin-right: 5%;
    position: relative;
    top: -60px;
}

.x-brand img {
    width: 200px;
}

.x-brand {
    margin-left: 5%;
}

}

Hope this helps.

[Pablo F]

Hi Rad,

Some things work but now for some reason another issues already fixed have changed or some other appear.

I have attached four captures which describe them.

Thank you again.

[Christopher]

Hi there,

Please add this :

.x-logobar-inner {
    padding: 53px 10px;
}
.x-navbar-inner {
    border-bottom: 1px solid #ddd;
}
@media ( max-width: 979px ) {
.masthead-stacked .x-brand {
    float: left;
}
}

Find this code and edit border width :

.x-logobar {
    border-bottom: 2px solid #ddd;
}

Remove following CSS:

.x-logobar-inner {
  background: #fff;
}

@media ( max-width: 979px ) {
.x-logobar, .x-logobar-inner, .x-logobar-inner > .x-container,
.x-navbar-wrap, .x-navbar, .x-navbar-inner, .x-navbar-inner > .x-container {
    border-bottom: 0px !important;
    display: inline;
}
}

Hope it helps.

[Pablo F]

You´ll see in the attached capture that some things going wrong, now the logo bar background is black, the responsive navbar doesn’t show anything at the top,…

After many changes we´ve made, could you please send me the whole CSS code just to check if we are missing anything?

As I’m seeing, there are some CSS rules that probably have no sense or are contradictory.

Thank you again.

[Rad]

Hi there,

Would you mind reverting it back to CSS mentioned at #1120033 and skip the recommendation at #1120088. Then let me know when done. Your navigation is stacked on a desktop and has to be inline on tablet/mobile, hence, it requires different styling and don’t remove the CSS given from #1120033 because it has a special purpose. I’ll think different CSS without removing it.

Let me know. Thanks!

[Pablo F]

Hi Rad,

As you have suggested, I have already reverted the CSS.

I have also created 3 different CSS files that I have attached:

1. letusa-header-navbar-before-christopher.css (the current active custom CSS)
2. letusa-header-navbar-christopher.css (the whole code including the Christopher´s changes)
3. letusa-header-navbar-christopher-fixed.css (the whole code including the Christopher´s changes cleaned up and organized by me)

Please, help me out inside that code as I´m getting pretty confused with all the changes we have in this thread. At this point I think the right and fastest way would be to check the global coherence of that code because I think there are some missing and contradictory rules there yet.

Regarding the navigation on mobile, I have checked it with the current CSS code on an iPhone and the menu bar doesn´t show when the navbar collapses to the top (check the capture).

Thank you in advance.

[Rad]

Hi there,

1. a. https://s3.amazonaws.com/community-themeco/app/uploads/2016/08/06051632/17.jpg

It’s because of this CSS,

.x-brand img {
    width: 200px;
}

I provided the CSS like this,

@media ( max-width: 979px ) {
.x-logobar, .x-logobar-inner, .x-logobar-inner > .x-container,
.x-navbar-wrap, .x-navbar, .x-navbar-inner, .x-navbar-inner > .x-container {
    border-bottom: 0px !important;
    display: inline;
}
.x-nav-wrap.mobile {
    padding: 0px 5%;
    position: relative;
    top: -40px;
    border-top: 2px solid #ddd;
}

.x-btn-navbar {
    float: right;
    margin-right: 5%;
    position: relative;
    top: -60px;
}

.x-brand img {
    width: 200px;
}

.x-brand {
    margin-left: 5%;
}

}

And not this,

.x-nav-wrap.mobile {
    padding: 0px 5%;
    position: relative;
    top: -40px;
    border-top: 2px solid #ddd;
}

.x-btn-navbar {
    float: right;
    margin-right: 5%;
    position: relative;
    top: -60px;
}

.x-brand img {
    width: 200px;
}

.x-brand {
    margin-left: 5%;
}

.x-logobar-inner {
  background: #fff;
}

@media ( max-width: 979px ) {
.x-logobar, .x-logobar-inner, .x-logobar-inner > .x-container,
.x-navbar-wrap, .x-navbar, .x-navbar-inner, .x-navbar-inner > .x-container {
    border-bottom: 0px !important;
    display: inline;
}
}

Please check the different, you move other CSS outside the @media ( max-width: 979px ) { }

1. b. https://s3.amazonaws.com/community-themeco/app/uploads/2016/08/06051632/17.jpg

It’s 1px on my end. But on my provided CSS, it will apply 2px on mobile/tablet only. But again, since you moved other CSS outside @media ( max-width: 979px ) { } then it could be the result too.

2. https://s3.amazonaws.com/community-themeco/app/uploads/2016/08/06051634/32.jpg

Please add this CSS as well,

.masthead {
background-color:#fff;
}

3. https://s3.amazonaws.com/community-themeco/app/uploads/2016/08/06051633/23.jpg

Please add this CSS,

.x-navbar.x-navbar-fixed-top{
    border-bottom: 2px solid #ddd;
}

4. https://s3.amazonaws.com/community-themeco/app/uploads/2016/08/06051634/41.jpg

Add this as well,

@media ( max-width: 979px ) {

.masthead {
margin-bottom: -50px;
}

}

Hope these helps.

[Pablo F]

Hi Rad,

Thank you very much again for your patience and you support.

I think I have understood your last changes, and I´ve updated the CSS code.

Regarding the latest issues, the horizontal lines seems to be ok (not in mobile width, which they are still invisible), the mobile menu head seems to be fixed up, but the rest of the issues are still there.

1. You can see the top header logo section is not 185px in height, and it´s still in black instead white. I don´t know where this colour is coming from as it´s not provided at the CSS rules. See the attached pictures.

.masthead {
background-color:#fff;
}

On mobile (below 979px width) despite the collapsed topbar looks good now in height:

2. You´ll see the black div/background rectangle.
3. The navbar logo, the nav button and the horizontal lines disappear when scrolling down.

I hope there´s a solution to revert the top header to the original appearance (white background and 185px height) and both responsive issues regarding the black div on the back and why it disappears when scrolling.

Here it is the current complete CSS code, I hope it helps:

/*
// Header Navbar
*/

.x-navbar {
    background: #fff;
}

.x-navbar .desktop .x-nav > li.nav-logo img {
    width:150px;
}

.x-navbar .desktop .x-nav > li.nav-logo a {   
    padding-top:5px;
}

.x-navbar .desktop .x-nav > li.nav-logo {
    display:none;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li.nav-logo {
    display:block;
}

.x-navbar .desktop .x-nav>li>a {
    border-right: 1px solid #ddd;
}

.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 {
    color:#02aed6;
}

.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: 0 2px 0 0 #02aed6;
}

.x-logobar {
    border-bottom: 2px solid #ddd;
}

.x-btn-navbar.collapsed:hover,
.x-btn-navbar:hover { 
    color: #000;
}

.x-btn-navbar, .x-btn-navbar.collapsed {
    color: #ccc;
}
.x-logobar-inner {
    padding-top: 0;
    padding-bottom: 0;
}
.x-logobar {
    border-bottom: 1px solid #ddd;
}

.x-nav-wrap.mobile {
    padding: 0px 5%;
    position: relative;
    top: -40px;
    border-top: 2px solid #ddd;
}

.x-btn-navbar {
    float: right;
    margin-right: 5%;
    position: relative;
    top: -60px;
}

.x-brand img {
    width: 200px;
}

.masthead {
    background-color:#fff;
}

.x-navbar.x-navbar-fixed-top {
    border-bottom: 2px solid #ddd;
}

@media ( max-width: 979px ) {
    
    .x-logobar, .x-logobar-inner, 
    .x-logobar-inner > .x-container, 
    .x-navbar-wrap, .x-navbar, .x-navbar-inner, 
    .x-navbar-inner > .x-container {
        border-bottom: 0px !important;
        display: inline;
    }
    
    .x-nav-wrap.mobile {
        padding: 0px 5%;
        position: relative;
        top: -40px;
        border-top: 2px solid #ddd;
    }

    .x-btn-navbar {
        float: right;
        margin-right: 5%;
        position: relative;
        top: -60px;
    }

    .x-brand img {
        width: 200px;
    }

    .x-brand {
        margin-left: 5%;
    }

    .masthead {
        margin-bottom: -50px;
    }
    
    .x-navbar.x-navbar-fixed-top {
        position:fixed !important;
    } 
    
    .x-navbar .mobile .x-nav>li.x-menu-item-search a:hover {
        color:#000;
    }
    
    .nav-logo {
        display: none;
    }
}

@media (max-width: 1040px) {
    
    .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
        padding-left: 15px;
        padding-right: 15px;
    }
    
}

Thank you.

[Lely]

Hello Pablo,

Upon checking, the logo container have background color. That’s what you’re seeing. Since it’s on top of the masthead, it covers the white background of the masthead.

Check this part of your custom CSS:

.x-logobar {
    border-bottom: 2px solid #ddd;
}

.x-btn-navbar.collapsed:hover,
.x-btn-navbar:hover { 
    color: #000;
}

.x-btn-navbar, .x-btn-navbar.collapsed {
    color: #ccc;
}
.x-logobar-inner {
    padding-top: 0;
    padding-bottom: 0;
}
.x-logobar {
    border-bottom: 1px solid #ddd;
}

First, as you can see at the top of that part, you have set .x-logobar to have bottom border of 2px, but then you overwrite it by declaring .x-logobar again to have 1px border bottom instead.
Remove this part since it’s overridden anyway:

.x-logobar {
    border-bottom: 2px solid #ddd;
}

Then update this part:

.x-logobar {
    border-bottom: 1px solid #ddd;
}

To this:

.x-logobar {
    border-bottom: 1px solid #ddd;
    background: #fff; /*To make logo background color to white*/
}

By default, navigation is not fixed on mobile that’s why it doesn’t stay. If you want it to stay even if we scroll, please update this part of your CSS:

    .masthead {
        margin-bottom: -50px;
    }

To this:

.masthead {
    margin-bottom: -50px;
    position: fixed;
    z-index: 999999;
    width: 100%;
    height: 60px;
}

Also update this:

    .x-btn-navbar {
        float: right;
        margin-right: 5%;
        position: relative;
        top: -60px;
    }

To this:

    .x-btn-navbar {
        float: right;
        margin-right: 5%;
        position: relative;
        margin-top: -60px;
    }

To avoid confusion, please try updating above entire CSS that you have shared to the following. I’ve already included the changes I have discussed above.

/*
// Header Navbar
*/

.x-navbar {
    background: #fff;
}

.x-navbar .desktop .x-nav > li.nav-logo img {
    width:150px;
}

.x-navbar .desktop .x-nav > li.nav-logo a {   
    padding-top:5px;
}

.x-navbar .desktop .x-nav > li.nav-logo {
    display:none;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li.nav-logo {
    display:block;
}

.x-navbar .desktop .x-nav>li>a {
    border-right: 1px solid #ddd;
}

.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 {
    color:#02aed6;
}

.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: 0 2px 0 0 #02aed6;
}

.x-btn-navbar.collapsed:hover,
.x-btn-navbar:hover { 
    color: #000;
}

.x-btn-navbar, .x-btn-navbar.collapsed {
    color: #ccc;
}
.x-logobar-inner {
    padding-top: 0;
    padding-bottom: 0;
}
.x-logobar {
    border-bottom: 1px solid #ddd;
    background: #fff; /*To make logo background color to white*/
}
.x-nav-wrap.mobile {
    padding: 0px 5%;
    position: relative;
    top: -8px;
    border-top: 2px solid #ddd;
}

.x-btn-navbar {
    float: right;
    margin-right: 5%;
    position: relative;
}

.x-brand img {
    width: 200px;
}

.masthead {
    background-color:#fff;
}

.x-navbar.x-navbar-fixed-top {
    border-bottom: 2px solid #ddd;
}

@media ( max-width: 979px ) {
    
    .x-logobar, .x-logobar-inner, 
    .x-logobar-inner > .x-container, 
    .x-navbar-wrap, .x-navbar, .x-navbar-inner, 
    .x-navbar-inner > .x-container {
        border-bottom: 0px !important;
        display: inline;
    }
    
    .x-nav-wrap.mobile {
        padding: 0px 5%;
        position: relative;
        border-top: 2px solid #ddd;
    }
    .x-btn-navbar {
        float: right;
        margin-right: 5%;
        position: relative;
        margin-top: -60px;
    }

    .x-brand img {
        width: 200px;
    }

    .x-brand {
        margin-left: 5%;
    }

	.masthead {
		margin-bottom: -50px;
		position: fixed;
		z-index: 999999;
		width: 100%;
		height: 60px;
	}    
    .x-navbar.x-navbar-fixed-top {
        position:fixed !important;
    } 
    
    .x-navbar .mobile .x-nav>li.x-menu-item-search a:hover {
        color:#000;
    }
    
    .nav-logo {
        display: none;
    }
    .x-nav-wrap.mobile.collapse.in {
        background-color: #fff;
     }
}

@media (max-width: 1040px) {
    
    .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
        padding-left: 15px;
        padding-right: 15px;
    }
    
}

Hope this helps.

[Pablo F]

Hi Lely,

Thank you very much for your precise explanations.

I´ve copied and replaced the entire CSS you´ve provided.

Now everything is working better, but there are 3 issues remaining:

1. The bottom grey line of the navbar is still hidden:

a) Above 979px width with the top logo section on screen.
b) Below 979px width.

The bottom grey line is only shown:

a) Above 979px width when the navbar has collapsed to the top.
b) Below 979px width after unfolding the mobile menu.

2. The top header logo section is still 70px height instead the original 185px height.

3. Below 979 px with both the company logo and the navigation button are not vertically aligned accurately.

I have attached some captures with these issues.

Kind regards.

[Pablo F]

And one latest questions which is not related before:

I have checked it and 979px width as responsive breakpoint is too much because with 800px width there is enough room for the navigation bar.

But when changing

@media ( max-width: 979px )

to

@media ( max-width: 800px )

The navigation bar breaks into 2 lines between 800px and 979px.

How could this issue be solved?

PS: I know there are many issues related to the same topic in this thread. I have a regular knowledge of CSS, but many of them are related to incoherences between different suggested changes you have provided, I´m just copy / pasting them, and sometimes trying to tweak something to see if I can fix these new or remaining issues before posting again. I hope you´ll understand.

Thank you again.

[Lely]

Hi Pablo,

1.) Please update this:

.masthead {
    margin-bottom: -50px;
    position: fixed;
    z-index: 999999;
    width: 100%;
    height: 60px;
}

To this:

.masthead {
    margin-bottom: -50px;
    position: fixed;
    z-index: 999999;
    width: 100%;
    height: 60px;
    border-bottom: 2px solid #ddd;
}

Also update this:

.x-nav-wrap.mobile {
    padding: 0px 5%;
    position: relative;
    top: -8px;
    border-top: 2px solid #ddd;
}

To this:

.x-nav-wrap.mobile {
    padding: 0px 5%;
    position: relative;
    top: -8px;
}

Inside the media query, also update this:

    .x-nav-wrap.mobile {
        padding: 0px 5%;
        position: relative;
        border-top: 2px solid #ddd;
    }

To this:

    .x-nav-wrap.mobile {
        padding: 0px 5%;
        position: relative;
    }

2.) Please remove this part:

.x-logobar-inner {
    padding-top: 0;
    padding-bottom: 0;
}

By default top and bottom padding is 45px. Above CSS reset it to zero. The padding adds to the height. In case you think it’s to much, you may just update that 0 value to your preferred spacing.

3.) Look for this part:

    .x-btn-navbar {
        float: right;
        margin-right: 5%;
        position: relative;
        margin-top: -60px;
    }

Update to this:

    .x-btn-navbar {
        float: right;
        margin-right: 5%;
        position: relative;
        margin-top: -52px; /* Adjust this accordingly*/
    }

Regarding adjusting the breakpoint, the space is not enough. Please note that you do have a logo as inline on scroll. See attached screenshot. The logo and menu in just one line doesn’t fit.

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Pablo F]

Thank you so much again Lely (and the rest of the X-Theme crew that helped with these issues too).

Now the most important issues are already solved.

The 2px grey horizontal bottom line at the navigation bar above 979px width is not shown yet, and the company logo in the mobile navigation bar is still vertically aligned to the bottom, but anyway, it doesn´t matter.

Great job.

[Nabeel A]

Glad we could help 🙂

Cheers!

[Author]

Posts