Navigation Bar Issue - Climate Theme

Hello Everyone,

I was wondering if anyone could help me with this. I used the code on this link for one of the things I wanted to do for my website’s navbar:

However, I am running into this issue, in which I was wondering anyone could help me out with CSS code. I have used both the CSS and Javascript code that @DLH put in, but my navigation bar is cutting off some of my titles. Does anyone have any idea on how to fix this?

Not sure I follow,

The title says Climate Theme, but the link to the post says Mountain theme, what theme are you using?

It’s always best to include a URL when asking for CSS help.


I am using the climate theme. I couldn’t find any CSS for the navigation bar for the Climate theme so I decided to try and use the code for the Mountain theme, in the hopes that it would work. It did make the navigation bar how I wanted it, however as I said, the title is getting cut off.


Most custom CSS for things like Navigation is going to be theme dependent.

Do you have a URL?

I do not have a URL, as I haven’t published the website at all, as I am still in the process of developing it. After looking at @DLH 's code, would you be able to modify so that it doesn’t cut into the title based on the Screenshot I put.

Without seeing exactly what you have it’s hard to say:

you could try adding some padding to hero area:

.hero-content {
padding-top: 20rem;

That should push down the content.
1 rem = 16px with that theme.

I didn’t really check what Don had done. I don’t know if you need the Javascript with the new theme.

1 Like

This unfortunately does not work. Do you have any other CSS that could work?

Each theme uses different CSS selectors and different HTML layouts. Add custom CSS you’ve added to get things to look how you want, and we’re left shooting arrows in the dark at a moving target. There’s no way we’re going to be able to help in a situation like this. You really need to provide us a link to a test page, of us to help you.

If you’re redoing an existing site, just publish a test page using a folder name you haven’t used on your live site. Something like “testpage” would likely work. Under that page’s General Setting, uncheck “Show in navigation”. On the Meta Tags properties, Leave “Enable Robot Meta Tags” checked and uncheck “Index this page” and “Follow links”. Then publish to your site.

If you don’t have a site yet, then it’s time to choose a hosting provider and publish a test site/page.

Once you have a live example, post a link here along with the details of what you’re trying to achieve.

Again, without a link, it’s going to be very hard (likely impossible) to provide code to do what you want.


As @DLH Don said.

What you’re asking someone to do is to attempt to build the exact same project with the exact same plugins, theme and addons, with the same content and the customizations you’ve already installed in order to help you out.

That’s a lot of work for someone else to go through to help you customize your site.

You eventually will need to publish the site.

You might not realize how people help customize things like CSS. They use a browser with developers tools.


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.