Navbar hides page content in mobile display

Support
#1

https://dickenscarolers.ca/

I’m trying to control the position of the top of the page content relative to the navbar. I want the top of the page to appear immediately below the bottom of the navbar both in full page display, and also in mobile display.

I tried this CSS, without getting the desired result:

body.x-navbar-fixed-top-active .x-navbar-wrap {
height: 190px;
}

I tried various pixel heights, but there is always too much margin in full page mode, and at the same time too little in mobile. I have also tried both fixed and static options for the navbar.

I addition, I can see the changes I make reflected in the page layout while I am editing in Cornerstone, but I can’t see any changes at all to the site after modifying this CSS when I check it from a fresh / cleared cache browser window.

Thanks very much for your help.

#2

Hi There @dlmorey

Thanks for writing in! Upon checking, I see that you’re using an older version of X theme and Cornerstone plugin on your site. First of all, could you please try updating to the latest version and see if that helps.

You can check the latest version numbers from here (https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195) and update accordingly by following our guide here (https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62).

If you’re using a caching plugin, make sure to purge your server cache and also clear your browser cache before testing.

Let us know how it goes.
Thanks!

#3

I’ve updated the Cornerstone and X Theme versions, as you directed.

Please offer further direction how to control the amount of margin (zero) between the top of the page content and the bottom of the header.

Thanks for such a fast reply, BTW. :slight_smile:

#4

Hi there,

Please try this code in the Global CSS instead:

@media (max-width: 979px) {
    .x-main.full {
        margin-top: 90px;
    }
}

Here are some reference links related to the suggestions above:

Hope this helps.

#5

Hi!

I have added the code to the global CSS, as directed.

When I reduce the browser window size and observe the behavior of the page layout as the display becomes smaller, there is no difference with the code included or omitted. I use incognito browser windows to test, so the cache is clear each time.

The code you provided is currently included. My global CSS currently looks like this:

.x-navbar {
position: fixed;
width: 100%;
top: 0;
background-color: rgba(18, 10, 39, .9) !important;
box-shadow: none;
border-bottom: none;
}
.x-colophon.bottom {
background-color:rgb(16, 38, 66);
}
.x-colophon.bottom .x-nav li a {
color: #999999;
font-size: 14px;
text-decoration: none;
}
.x-colophon.bottom .x-colophon-content a {
color: #999999;
font-size: 10px;
text-decoration: none;
}
.x-colophon.bottom a span:hover, .x-colophon.bottom a:hover {
color: white !important;

}
.x-colophon.bottom a {
padding: 20px 0px 20px 0px !important;
}
.admin-bar .x-navbar {
top: 32px;
}
.x-colophon.bottom {
padding: 0 !important;
}
@media (max-width: 979px) {
.x-main.full {
margin-top: 90px;
}
}

What is the next step to try?

Thanks!

#6

Hi,

Upon checking, I can see the problem is your logo and navbar does not fit on certain screen widths which makes your menu to go down and cover your content.

To resolve this, you can reduce the size of your logo and menu spacing on smaller screen width.

You can add the code below in Theme Options > CSS

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

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

Hope that helps.

#7

Hi -

https://dickenscarolers.ca/

I added the code to Global CSS, but I can’t see any difference, after clearing the cache plugin and using incognito windows of 2 browsers to check.

The full screen display still crops a margin of the top of the page content, as you reduce the screen size, the next jump crops it severely, and then in mobile mode it looks pretty good.

This is just as it was before adding your last block of code.

Also, I don’t use woo commerce on the site, and I don’t use a logo either.

This is the current contents of my global CSS:

.x-navbar {
position: fixed;
width: 100%;
top: 0;
background-color: rgba(18, 10, 39, .9) !important;
box-shadow: none;
border-bottom: none;
}
.x-colophon.bottom {
background-color:rgb(16, 38, 66);
}
.x-colophon.bottom .x-nav li a {
color: #999999;
font-size: 14px;
text-decoration: none;
}
.x-colophon.bottom .x-colophon-content a {
color: #999999;
font-size: 10px;
text-decoration: none;
}
.x-colophon.bottom a span:hover, .x-colophon.bottom a:hover {
color: white !important;

}
.x-colophon.bottom a {
padding: 20px 0px 20px 0px !important;
}
.admin-bar .x-navbar {
top: 32px;
}
.x-colophon.bottom {
padding: 0 !important;
}
@media (max-width: 979px) {
.x-main.full {
margin-top: 90px;
}
@media(max-width:1170px) {
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
padding-left: 15px;
padding-right: 15px;
}

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

Thanks! :slight_smile:

#8

Hi @dlmorey,

May I know what you’re trying to achieve? The content and navbar overlaps because of this one from your custom CSS.

.x-navbar {
position: fixed;
width: 100%;
top: 0;
background-color: rgba(18, 10, 39, .9) !important;
box-shadow: none;
border-bottom: none;
}

It’s intended to be for desktop, then change it to this

@media (min-width: 980px) {
.x-navbar {
position: fixed;
width: 100%;
top: 0;
background-color: rgba(18, 10, 39, .9) !important;
box-shadow: none;
border-bottom: none;
}
}

If it’s intended to be in the specific page (so other pages content won’t be affected), then you should use a page selector.

Thanks!

#9

Thanks Rad.

The change this code makes is to produce a deep (undesirable) white margin in small display mode, while the desktop display is not apparently changed - the top of the page is still covered. The mid range display size - where the top of the page is the most covered by the navbar - is still unchanged.

This is the current Global CSS contents:

@media (min-width: 980px) {
.x-navbar {
position: fixed;
width: 100%;
top: 0;
background-color: rgba(18, 10, 39, .9) !important;
box-shadow: none;
border-bottom: none;
}
.x-colophon.bottom {
background-color:rgb(16, 38, 66);
}
.x-colophon.bottom .x-nav li a {
color: #999999;
font-size: 14px;
text-decoration: none;
}
.x-colophon.bottom .x-colophon-content a {
color: #999999;
font-size: 10px;
text-decoration: none;
}
.x-colophon.bottom a span:hover, .x-colophon.bottom a:hover {
color: white !important;

}
.x-colophon.bottom a {
padding: 20px 0px 20px 0px !important;
}
.admin-bar .x-navbar {
top: 32px;
}
.x-colophon.bottom {
padding: 0 !important;
}
@media (max-width: 979px) {
.x-main.full {
margin-top: 90px;
}
@media(max-width:1170px) {
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
padding-left: 15px;
padding-right: 15px;
}

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

Thanks.

#10

Hi again,

To fix the issue, try adding the following code in the Theme Options > JS:

function stop_jumps() {
	jQuery('header.masthead.masthead-inline').css('height', jQuery('.x-topbar').height() + jQuery('.x-navbar').height());
}
jQuery(document).ready(function(){
	stop_jumps();
});
jQuery(window).resize(function(){
	stop_jumps();
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

#11

We’re much closer to a working solution now! The top of the page remains at the top of the page, at all display sizes.

What is still a problem is a deep white margin between navbar and page top at smaller display sizes.

Thanks for your help. :slight_smile:

#12

Hi @dlmorey

I’ve checked your website and I can see that adding this CSS code to (Theme Options > CSS) should resolve this issue:

@media screen and (max-width: 470px){
    .x-brand.img {
        display: none;
    }
}

Let me know how it goes,
Thanks.

#13

Hi - thanks for the reply.

The problem isn’t yet resolved. A deep white margin remains on the top of the page in smaller displays.

Is it possible that I have conflicting lines of code in my custom CSS?

I’ve had several support technicians direct me to add code, and similar snippets are now included throughout the list.

I have consolidated the similar lines all to the bottom, and this is how they now appear:

.x-colophon.bottom {
background-color:rgb(16, 38, 66);
}
.x-colophon.bottom .x-nav li a {
color: #999999;
font-size: 14px;
text-decoration: none;
}
.x-colophon.bottom .x-colophon-content a {
color: #999999;
font-size: 10px;
text-decoration: none;
}
.x-colophon.bottom a span:hover, .x-colophon.bottom a:hover {
color: white !important;

}
.x-colophon.bottom a {
padding: 20px 0px 20px 0px !important;
}
.admin-bar .x-navbar {
top: 32px;
}
.x-colophon.bottom {
padding: 0 !important;
}
.x-brand img {
width:220px;
}
@media screen and (max-width: 470px){
.x-brand.img {
display: none;
}
@media (max-width: 979px) {
.x-main.full {
margin-top: 90px;
}
@media(max-width:1170px) {
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 980px) {
.x-navbar {
position: fixed;
width: 100%;
top: 0;
background-color: rgba(18, 10, 39, .9) !important;
box-shadow: none;
border-bottom: none;
}

Thanks for suggesting the best way to resolve this issue.

#14

Hi -

By including the latest line of code that you supplied, I lost the background color of the navbar, I am supposing because of conflicts with the other code that was there.

So for now, I have only this list in the custom CSS, while I wait for you to recommend the next step:

.x-colophon.bottom {
background-color:rgb(16, 38, 66);
}
.x-colophon.bottom .x-nav li a {
color: #999999;
font-size: 14px;
text-decoration: none;
}
.x-colophon.bottom .x-colophon-content a {
color: #999999;
font-size: 10px;
text-decoration: none;
}
.x-colophon.bottom a span:hover, .x-colophon.bottom a:hover {
color: white !important;

}
.x-colophon.bottom a {
padding: 20px 0px 20px 0px !important;
}
.admin-bar .x-navbar {
top: 32px;
}
.x-colophon.bottom {
padding: 0 !important;
}
.x-brand img {
width:220px;
}
@media (min-width: 980px) {
.x-navbar {
position: fixed;
width: 100%;
top: 0;
background-color: rgba(18, 10, 39, .9) !important;
box-shadow: none;
border-bottom: none;
}

#15

Hi There,

The background of navbar looks good on my end:

For you forgot to add the curly bracket(}) at the end of your custom CSS.

Please change your custom CSS to this:

.x-colophon.bottom {
	background-color: rgb(16, 38, 66);
}

.x-colophon.bottom .x-nav li a {
	color: #999999;
	font-size: 14px;
	text-decoration: none;
}

.x-colophon.bottom .x-colophon-content a {
	color: #999999;
	font-size: 10px;
	text-decoration: none;
}

.x-colophon.bottom a span:hover, .x-colophon.bottom a:hover {
	color: white !important;
}

.x-colophon.bottom a {
	padding: 20px 0px 20px 0px !important;
}

.admin-bar .x-navbar {
	top: 32px;
}

.x-colophon.bottom {
	padding: 0 !important;
}

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

@media (min-width: 980px) {
	.x-navbar {
		position: fixed;
		width: 100%;
		top: 0;
		background-color: rgba(18, 10, 39, .9) !important;
		box-shadow: none;
		border-bottom: none;
	}
}

Could you please also provide us with your screenshots about your issues?

Many thanks.

#16

I was in the process of sending you screenshots when I finally realized that your support team has already solved the problem of the top of the page being partially obscured. Thank you very much for that!

The problem is actually on my end - what I am seeing that bothers me is simply the white mobile navbar background color.

Can you tell me how to adjust the color and transparency of that mobile navbar please?

Thanks so much.

#17

Hi There @dlmorey

Could you please try adding the following CSS rule also into your X -> Theme Options -> CSS area and see if that helps.

@media(max-width:768px){
  .x-navbar {
    background: transparent;
  }
}

Hope that helps.

#18

Hi - thanks for that.

Making the navbar transparent unfortunately doesn’t help, because it makes the menu items unreadable.

What I would like to do instead is to change the color to a dark purple, and make the transparency about 50%.

Is that possible?

#19

Hello There,

Yes it could be possible. Please update the code and use this instead:

@media(max-width:768px){
  .x-navbar {
    background-color: rgba(139,0,139, 0.5);
  }
}

Please let us know if this works out for you.

#20

The navbar that appears when the display is less than 980 pixels wide is still white.

I want it to be partially transparent purple, using the values rgba(11,7,30, 0.5)

This is my current custom CSS. Please help me correct the problem:

.x-colophon.bottom {
background-color: rgb(16, 38, 66);
}

.x-colophon.bottom .x-nav li a {
color: #999999;
font-size: 14px;
text-decoration: none;
}

.x-colophon.bottom .x-colophon-content a {
color: #999999;
font-size: 10px;
text-decoration: none;
}

.x-colophon.bottom a span:hover, .x-colophon.bottom a:hover {
color: white !important;
}

.x-colophon.bottom a {
padding: 20px 0px 20px 0px !important;
}

.x-colophon.bottom {
padding: 0 !important;
}

.x-brand img {
width: 220px;
}
.admin-bar .x-navbar {
top: 32px;

}
@media (min-width: 980px) {
.x-navbar {
position: fixed;
width: 100%;
top: 0;
background-color: rgba(11, 7, 30, .5) !important;
box-shadow: none;
border-bottom: none;
}
}

Thanks!