The fixed top bar & nav bar are covering some of my page content!

Support
#1

Hi, I’m working on a site and I’ve got the top bar and nav bar (with logo) to stay fixed on the page with CSS, however the nav bar is covering part of my page content and I haven’t got a clue how to fix it! I’ve tried using CSS with setting the ‘display’ or ‘position’ to various options, but nothing resolves it.

I’ll put the URL in a secure note as it’s on a temp link, but the page content that’s partly obscured is the grey gradient band under the nav bar, the top of the ‘Search’ field is almost behind the nav bar!

Hope you can help!

Thanks!

#2

HI @core365,

Please go to X > Theme Options > Header then increase the value of Navbar Top Height (px) about 157px;.

Hope this helps.

#3

Hi, unfortunately that didn’t work, it made the navbar taller, but just pushed the bar under it further down and was still covering it up!

I’ve took some CSS out that I put in and it’s stopped the page content being covered up, however the navbar is now under the topbar! I’ve tried to change the position with CSS, but nothing seems to correct this. I hope you can help!

Thanks!

#4

Hello @core365,

Would you mind providing a link to a page that shows the issue? I checked some of your pages and the content doesn’t seem to be covered:

Hello_world____RSD_Tool_Hire
Hello_world____RSD_Tool_Hire1826×1458 192 KB

Hope this helps.

#5

Hi @jade,

On the screen grab you attached, the logo is cut off at the top! The lettering ‘RSD’ in the logo is cut in half, the top of it isn’t showing. The navbar is now under the topbar!

Thanks!

#6

Hi @core365,

That is because of the custom code you added:

.x-topbar {
    background: #d5dae2;
    background: -moz-linear-gradient(top,#fff 0%,#d5dae2 100%);
    background: -webkit-linear-gradient(top,#fff 0%,#d5dae2 100%);
    background: linear-gradient(to right,#d5dae2 0%,#fff 35%,#fff 50%,#fff 65%,#d5dae2 120%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5dae2',endColorstr='#ffffff',GradientType=0 );
    min-height: 33px;
    padding-top: 0px;
    position: fixed;
    width: 100%;
    height: 33px;
    text-align: center;
}

It sets the topbar to a fixed position causing the content next to it to start on the same level thus causing the covering issue.

As custom code is beyond the scope of our support, I can provide some suggestions how to solve it - try targetting .x-navbar-wrap and set a top padding to it to make up for the space of the top bar.

Hope this helps.

#7

Hi @jade,

I’ve done that, however it’s created the problem with the page content being covered by the navbar - on the Home page, the dark grey band with the search bar that’s under the navbar is covered at the top - there should be space above the search field and instead it’s touching the navbar.

Also, when I scroll down the page, the navbar moves and doesn’t stay fixed!

Thanks!

#8

Hi @core365,

I already provided the solution for this in my previous replies.

See what happens when you set the value to 157px: https://imgur.com/a/Ik5YOSo

The navbar area gets the position fixed as well as you scroll where the class .x-navbar-fixed-top is added to the navbar area. Try adding a margin/padding top to that class so that it will add space will be added to it.

In case you want to understand more what the position fixed does, please check this link: https://www.w3schools.com/css/css_positioning.asp

Hope this helps.

#9

Hi @jade,

I had changed the Navbar Top Height to 157px when you first said to, but it created another problem, it added space under the logo (I don’t want any blue to be under the logo, the navbar is to be the height of the logo) and the page content was still partially covered by it! I’ve changed it to 157px again and left it for you to see - here’s the screen grab too of it:

Screen Grab
Screen Grab1847×750 376 KB

Thanks for the advice for getting the navbar to stay fixed, that’s sorted now!

Thanks!

#10

Hi @core365,

Try adding the overflow property to the navbar wrap and set it to hidden.

https://www.w3schools.com/cssref/pr_pos_overflow.asp

Hope this helps.

#11

Hi @jade,

Many thanks for your perseverance with this! That has sorted it to a certain extent, it’s now when you scroll down the overflow isn’t hidden, it reappears!

Thanks!

#12

Hi @core365,

Please try this code:

.x-navbar-fixed-top .x-navbar-inner {
    min-height: 0;
}

Just a heads up for next time, the cause of this issue is the customization you have added on the header and he do not provide support for troubleshooting issues caused by custom.

Hope this helps.

#13

Hi @jade,

Thanks, however the css didn’t work I’m afraid. What I’ve done is I’ve removed all of the CSS I added in and apart from the styling of the top bar, before scrolling down the page it looks how I want it to. So will you be able to let me know the CSS to keep the top bar fixed and the nav bar fixed in position when you scroll down the page please. I can then work out what I’ve done wrong with my CSS.

Thanks!

#14

Hi @core365,

Making the top bar fixed that will not result to style issues after can be done using template change with X theme. Using CSS will definitely produce some issue because basically you are making 2 fixed container bar, topbar and navigation bar.

Using template change, it is unfortunately outside the scope our support. I can only give the idea on how it can be done. Note that I also did not actually test this idea, but it should work based on structure. On renew stack wp-header.php template file, you have to remove that view that display topbar. Put it inside the _global template _navbar.php inside the navigation wrap where fixed class is added. You might need better understanding of the structure to implement this. Doing this means basically moving the entire topbar inside the fixed class container.

If in case you are not familiar with php coding, please avoid this change. We cannot support errors or issues resulting from customization. Note that when structure change, some styles can be affected too that you might need to fixed

Another alternative too, which is way better is switching to PRO theme. You can build it easily using the header builder. Just one fixed Bar and multiple ROWS can achieve this.

Hope this helps.

#15

Hi, I figured out I had to set the height of the masthead and that sorted it.

I’ve used your PRO theme before and I have to admit I don’t like how the header and footer is set up, it’s not simple to do and is hard to get it right to work responsive and very time consuming which puts me off using it.

It seems the help from yourselves has changed over the past few weeks compared to how it used to be which is a shame, as your invaluable help with CSS and getting the theme to work how I wanted it was one of the main reasons why I used your theme time and time again. It’s as though it’s got more limited as to what you can and can’t help with.

Thanks for your help and time with this.

#16

Hello @core365,

You are most welcome. We really appreciate your very kind feedback. By the way, please check out our video tutorials too!

Subscribe to our channel for more updates, tips, and how-to videos.

Cheers.

#17

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