Ethos - Logo in sticky bar

[pibo5]

Hi,

About 5 years ago I developed the site nuevaletusa.es for a customer and I asked for a customization at the Themeco forum. I have no access to that site currently so I cannot retrieve the code from there.

What I need to know is how we did the logo move to the navigation bar, to the left as a button to act like the Homepage button. Also you can see its responsive behavior: on narrow width there are 2 elements on the navigation bar: the logo to the left and the mobile icon menu tu the right.

Could you please provide me instructions to do the same (please, check the link) on a new Ethos installation?

Thank you in advance.

[ruenel]

Hello @pibo5,

Thanks for writing in!

The logo in a sticky bar with the Ethos stack was done with the following steps:

1.) The logo and navigation should be layout as Stacked. You can see this setting in X > Theme Options > Headers > Logo and Navigation.
The

2.) Of course, you also need to set the position of the header to Fixed Top as shown in the above screenshot.

3.) You then go to Appearance > Menu to edit your primary menu. A custom menu item needs to be added as the logo.

In the navigation label, the image element code were added, in the example case, this image were added:

<img alt="Letusa" data-src="//www.nuevaletusa.es/media/letusa-logo.png" class=" ls-is-cached lazyloaded" src="//www.nuevaletusa.es/media/letusa-logo.png">

And then a CSS class nav-logo were also added.

4.) And lastly, a custom CSS were added in X > Theme Options > Custom CSS:

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

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

@media (max-width: 979px){
  .nav-logo {
    display: none;
  }
}

Kindly let us know if this helps you.

[pibo5]

Hi ruenel,

Thank you very much for your help.

I´ve tried it and it’s working except:

1. The logo doesn’t fit into the div inside the the navigation bar and I’ve tried to change the dimensions in the Wordpress Custom link fields, with no results.

2. Regarding the responsive behavior in narrow displays, I would like to have the same as https://www.nuevaletusa.es You can check that the navigation bar gets sticky too with the logo to the left and the navigation icon to the right, directly when loading the page (without the logo at the top before scrolling as we have by default in Ethos).

If you need to enter the dashboard or something please tell me how to send you the credentials in a private message.

Awaiting for your answer,

Best Regards.

[tristup]

Hi @pibo5,

I have checked your website and found that the Logo is perfectly fitted within the Navigation Menu Item as shown in the given screenshot.

And in the smaller screen devices, the Navigation menu converted to the Humberger menu along with the Logo in left as it is shown on your website.

If that is not the case and you are trying to point out something else, please provide any screenshot marked with the issue or any video that helps us to recognize the problem.

Thanks

[pibo5]

Thank you tristup,

That’s right. I was trying to explain that site is the example I would like to reach.

Check the captures and you’ll see what I have now in the new site.

[prakash_s]

Hello @pibo5,

In order to help you with your concern, we need to check your settings please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

[pibo5]

Hi,

I have already added your login credentials to my previous message. Please, check it.

[marc_a]

Hi @pibo5,

You can use this CSS code to fix your issue.

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

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

Output:

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[pibo5]

Hi marc_a,

Thank you for your answer.

As you can see, I have many X installations at this moment. Sometimes we don’t provide issues, but improvements. Ethos is a great template, but as I said 5 years before, it would be better that the logo keeps on the sticky navbar by default (it doesn’t make sense that the brand disappears completely from the site, having a navigation bar), and in the responsive behavior the same.

Do you think it’s a good layout having just the navigation icon in a whole navigation bar on mobile devices, without the brand? I think I’m not asking for anything that couldn’t be useful for anyone.

If you think that navigation bar is better that way without the brand logo, don’t do anything. If you agree that you have missed something, honestly, please update the Ethos layout.

Best Regards.

[marc_a]

Hi @pibo5,

The header part option about the brand logo showing or not showing on sticky navbar will depend on the website owners. Some of them prefer not to show and some prefer to show. In other words, we let the customer choose what they want to do in their header section. If you want to customize your header, you can use the Header Builder functionality, which can only be accessed using the Pro theme. I just check your account and it seems that you have a Pro theme. I suggest that you try that functionality so that you can customize your header.

• https://theme.co/docs/header-builder-overview

Hope that helps.

Thank you.

[pibo5]

Thank you again @marc_a,

I will check that functionality.

Best Regards.

[marc_a]

Hi @pibo5,

Great and you’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

[pibo5]

Hi @marc_a,

I have read https://theme.co/docs/layout-builder-overview, is it possible to customize the navigation bar with this option? I haven’t found anything related, but design the general page layout.

Do you have any tutorial about customizing the navigation bar?

Thank you.

[pibo5]

PS:

What I need to do is just this simple change. But as it depends on the layout and code of your theme, that’s why I’m asking for help:

[marc_a]

Hi @pibo5,

Sorry for the confusion, the right link for the header builder is this one.

• https://theme.co/docs/header-builder-overview

You can also watch our tutorials on Youtube about the header builder.

• https://www.youtube.com/channel/UCgY5E3tOI83kBEahh9Y3uRg/search?query=header%20builder

Hope that helps.

Thank you.

[pibo5]

Hi again,

After watching the video https://youtu.be/rSw2g3A2KLc and reading the * https://theme.co/docs/header-builder-overview doc, could you please tell me how can I access the Header Builder from the WP Dashboard? I couldn’t find it.

And at the Header Builder, at what section could the logo be placed to the left and the responsive nav icon to the right? Checking these instructions is not clear for me where to create both divs at a given width breakpoint.

Thank you.

[pibo5]

Hi again,

After 2 days for such simple thing, this would be my last message in this thread. I used to appreciate your support in the past, but after years without working on an X installation, this time I don’t understand what’s the problem on explain me how to split the responsive navbar into 2 divs instead one, with a clean set of particular X CSS classes.

Fists of all I have checked several post and randomly you are copy pasting that offensive “custom CSS is out of out scope”. It’s understandable that you won’t provide customizing services from here, but what’s a customization for you? Such simple change on the navigation bar - or obvious improvement, as I said before?

Secondly, “you must ask for a third-party developer”. I am that developer, excuse me. If anyone here is asking you for help with custom CSS, is because working on CSS is one of the most critical issues for Google SEO (penalties on the wrong use of classes, the annoying “visibility: hidden” attribute, etc.). I guess you’ll know what I’m talking about. Ask yourself why most people is avoiding themes and moving to another cleaner solutions.

And finally, if you provide an alternative solution for an specific question, please don’t make us lose our time with a Youtube playlist or a generic tutorial. I know CSS and how to make it work responsive grids, what I’m asking here is how could I do the most optimized solution for your specific X theme with your specific CSS code.

If you´d like to give me the solution, great and I would thank you as usual. If not, after 2 days, I don’t know what I’m doing here actually.

Here you have both captures of what I need to do on the Ethos responsive breakpoint: just keeping the sticky bar to the top with the brand logo to the left and the nav icon to the right, instead that centered generic icon.

Best Regards.

[christian]

Hey @pibo5,

Thank you for your feedback.

We’re very sorry for the lack of direction here. My colleague might have thought you’re already using Pro that is why he sent you links to Pro Header Builder tutorials so you’ll get familiar with the usage first.

Please first convert X to Pro. The instruction can be followed here https://theme.co/docs/converting-from-x-to-pro

After that, watch how to make the Header or rather each Bar in the header to stick here: https://www.youtube.com/watch?v=jEZ8B7E1wgE

In your sticky bar, set up 2 Containers and add in an Image element in the left Container and a Navigation Layered element in the right Container. The Image element will hold your logo. You can then show only the sticky bar on mobile using the Hide During Breakpoints feature.

The Pro Header Builder tutorial, by the way, is not specific because it is not possible to cover all the possibilities you can do with the Header Builder. Instead, you must know how to use the controls. There would be a bit of a learning curve but the end result is you’d be able to accomplish header designs not possible to achieve using options available in X.

Extending the design and functionality of X or even Pro or any product we provide through the use of any custom code is not a part of our product support. It’s part of our Terms. Sure we copy-paste the message but it serves as a reminder.

If you don’t like a design or function, you can post feedback here but it does not mean we’ll custom code a solution. We now strictly follow a process because we provided custom codes in the past in hopes that customers will learn how to code themselves but it got abused. That is why we post part of our Terms as a reminder. It’s not to offend. It’s a reminder.

As an example of customizations, we previously received a lot of different X Header customization. It is not sustainable to provide each and every customization as part of theme support. That is part of the reason Pro was built. It includes Header, Footer, and now, a Layout Builder to provide users of it options to create websites without needing to code or ask for customizations.

I hope you understand our part and we appreciate your business with us.