Docs

[Pablo F]

Hello,

1. I´m trying to customize the Ethos (Agency) navigation bar, basically changing the black background to white, but I´m lost with the details: lines, link colors and hover states, responsive navigation, etc. which now are hidden due to this changes.

Could you please help me out with these CSS rules?

2. After scrolling the page the navigation bar gets sticked to the top, but that way the logo disappears. My customer would like to show the logo to the left and the navigation buttons aligned to the right (like in a regular navigation bar).

Again, could you please tell me if it´s possible and how?

Best Regards.

[Pablo F]

This reply has been marked as private.

[Paul R]

Hi Pablo,

Your site look different on my end and not using xtheme.

See screenshot – http://screencast.com/t/4HP6TddJnGBw

Kindly check and let us know.

Thanks

[Pablo F]

Hi Paul,

To see the X site, you must enter the WP Dashboard as we have a maintenance mode active redirecting to the old site.

Thank you.

[Joao]

Hi There,

To have the logo on the left you have to go to Appereance > Customizer(Personalizar) > Header

and change your Header from Stacked to Inline.

Still on the header you have the option to adjust the hoover color. It is all translated to Spanish but the hoover color will be the “enlaces al passar el raton”

The color of the bar will follow your website links color which you can setup at Appereance > Customizer > Typography

I also reccomend you exploring the other parameters inside the Customizer including spacing for example, the fine tuning of all your options will help your website style look great 🙂

Let us know if you need help with anything else.

Joao

[Pablo F]

Thank you Joao,

But as you could see, the lines of the navigation buttons have disappeared with the white background, even they look light-grey in the original layout. How could I change the colour of these lines?

Regarding the stacked/inline option for the logo, maybe I haven´t explained well. I like the staked option, but when the page scrolls down, I would like to show the company logo on the left side of the navigation bar because in the staked mode it disappears. Any solution, please?

Thank you.

[Nico]

Hi There,

1. Little confuse of what you want to change or customize color. Would you mind sharing us a screenshot with indication which is to be change.

You could try this code below.

To change the current link color:

x-navbar .desktop .x-nav > .current-menu-item > a{
color:black;
}

To change color in the line below the text:

.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;
}

to change text hover:

.x-navbar .desktop .x-nav > li > a:hover

{
color:black;
}

Hope it helps. Thanks.

2. It is quite a custom development. It would be best to contact a custom developer regarding that customization.

Thanks you so much for understanding.

[Pablo F]

Hello Nico,

1. Regarding the colours of the navigation bar, I think it´s quite simple. Please check the attached screenshots, and you´ll see the grey lines of the buttons are not shown after changing the background color from black to white. I´ve used this code in the customizer:

/*
// Header Navbar
*/

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

Besides the text of the buttons: active is white, hover is white, which make them invisible over the white background. I would like all these items show up again over white (if possible). I´m going to try right now your suggestions, but I guess the thinner lines won´t show up yet.

You can also enter the site with the login credentials of my second post.

2. Contact a custom developer just to show the company logo in the navigation bar? Regarding the company logo inside the navigation bar after scrolling down (now it isn´t showing up), in terms of difficulty what´s the difference with the rest of the X stacks which show the big logo before scrolling down and then they show a smaller logo after the bar collapses to the top? Sorry but as my customer said, it seems like a kind of bug or something because it´s so weird that a corporate site doesn´t show the logo permanently somewhere at the header. I think I´m modestly asking for something quite general which could improve this stack for the rest of your customers too.

Best regards.

[Rad]

Hi there,

1. Ah, I see, but is there a way we could access your site? It’s redirecting to this site http://www.letusa.es/es/. I’m checking our demo based on your screenshot and setting the background to white doesn’t leave dark lines.

2. It’s intended feature for stacked navigation. Stacked navigation’s logo is not part of fixed positioning of the navbar. If you like, you can switch it back to inline logo at Admin > Appearance > Customizer > Header. Then we can simply add CSS to make it look like stacked on top of the menu.

Thanks!

[Pablo F]

This reply has been marked as private.

[Paul R]

Hi Pablo,

1. You can add this under Custom > Edit Global CSS in the Customizer.

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

.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;
}

2. With regards to your logo, I went ahead and added it in your navbar.

Hope that helps.

[Pablo F]

Hi Paul,

It works (almost) perfect, thank you so much.

I´ve found just 3 issues:

1. In the navigation bar, is there any way to hide the blue decoration below the logo when it´s active?

2. How could the color of both horizontal lines in the navigation bar be changed? Now the thin top line is black and the bottom line behind the buttons decoration is white. I´d like to change it to grey #ddd like the vertical lines.

3. As you can see, there are some bugs with the header responsive behavior:

a) Without scrolling (the logo on the top) the menu bar disappears below aprox. 980px width and no minimize navigation button is shown because although it´s there it´s white yet. If you can find that button and you press it, you´ll see a big logo on the top of the navigation links. Even more, the Search link turns white on hover. Could you make the logo remains on the left within the navigation bar in all responsive widths, the responsive navigation button turns visible on the right and hide the big logo which is shown in the responsive dropdown navigation list?

b) Also below 980px width the menu bar doesn´t get fixed to the top. Could it be changed?

c) Below 1040px width the fixed navigation bar is broken into 2 lines. Could it be fixed?

Thank you in advance.

[Paul R]

Hi,

You can add this under Custom > Edit CSS in the Customizer.

.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: 1px solid #ddd;
}

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

@media (max-width: 979px) {
.x-navbar.x-navbar-fixed-top {
     position:fixed !important;
} 
.x-navbar .mobile .x-nav>li.x-menu-item-search a:hover {
   color:#000;
}
}

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

Hope that helps.

[Pablo F]

Thank you again Paul,

Some things are already solved (the search button color, the top horizontal line at the navigation bar), but for some reason I´m experiencing some issues yet. I have attached 2 mock-ups for better understanding.

In responsivenav-issues.jpg you can see the current behavior. The navigation button is still white, on hover it´s ok but when it´s active, a blue square is shown, no button, and the big logo stills appear in the menu. Could it be fixed?

In responsivenav-ok.png I show you the expected results when the navigation collapses to the top, with the company logo to the left and the navigation button to the right.

The bottom 1px line of the navigation bar is still white, though you have set the x-logobar bottom to #ddd.

Also in Safari (I don´t see it in Firefox), between 1045px and 1040px the navigation bar on the top still breaks into 2 lines, it´s a minor issue.

Thank you so much again for your help!

[Rad]

Hi there,

It was redirecting yesterday even by logging in. But there is no more redirection at this moment in chrome.

Please add this CSS as well,

.x-btn-navbar, .x-btn-navbar.collapsed {
    color: #ccc;
}
.x-logobar-inner {
    padding-top: 0;
    padding-bottom: 0;
}
.x-logobar {
    border-bottom: 2px solid #ddd;
}
@media ( max-width: 979px) {
.nav-logo {
display: none;
}
}

And I can’t check it on firefox, still, because of redirection even by logging in. Not sure why and it’s weird, how about disabling the redirection?

Thanks!

[Author]

Posts