Mobile Fixed Header and Navabar Partially Covers Content – Themeco Community

Mobile Fixed Header and Navabar Partially Covers Content

moderncarolyn — Tue, 19 May 2015 16:17:07 +0000

I just purchased X Theme 1 month ago, and I am generally very pleased with it. I am having a problem with the mobile phone version of my site though. The desktop site looks good, but on the mobile, when I scroll down and then back up, my fixed header and navabar cover up part of my content. I am assuming this is because my name is long enough that it sends the navabar to the next line below.

I have tried to “fix” this by adding in an extra empty color band to the top of my pages on the mobile version, but this is kind of a tacky fix.

The url is buildingperform.com

Thank you!

moderncarolyn

Reply To: Mobile Fixed Header and Navabar Partially Covers Content

Nico — Tue, 19 May 2015 18:36:22 +0000

Hi There,

Thanks for writing in.

Try adding this code in your Customizer’s Custom CSS:

@media (max-width: 480px)
.x-brand img {
  width: 257px;
}

Hope it helps. Let us know.

Thanks.

Reply To: Mobile Fixed Header and Navabar Partially Covers Content

moderncarolyn — Tue, 19 May 2015 20:28:00 +0000

I copied that code and pasted it in the Custom CSS box located under Appearance and Customize, and that did not fix the problem. Any other suggestions?

Thanks so much!

Reply To: Mobile Fixed Header and Navabar Partially Covers Content

Lely — Tue, 19 May 2015 23:44:17 +0000

Hello ModernCarolyn,

Please edit above CSS to this:

@media (max-width: 480px){
  .x-brand img {
     width: 257px;
  }
}

Notice the extra bracket.

Hope this helps.

Reply To: Mobile Fixed Header and Navabar Partially Covers Content

moderncarolyn — Wed, 20 May 2015 03:27:20 +0000

Yes, this brought my navabar up to the same line as my header title, which looks much better! However, after I scroll down and then scroll back up, on a phone, it still doesn’t scroll clear back up to the top. Like I said, I added some extra color bars to make it work. However, for demonstration, I deleted the extra color bar on my home page if you would like to look at it on your phone and see what I’m talking about. buildingperform.com

Thank you.

Reply To: Mobile Fixed Header and Navabar Partially Covers Content

Christopher — Wed, 20 May 2015 07:36:00 +0000

Hi there,

Please add the following CSS under Customize -> Custom -> CSS :

body.x-navbar-fixed-top-active .x-navbar-wrap {
  height: 100px !important;
}

Hope it helps.

Reply To: Mobile Fixed Header and Navabar Partially Covers Content

moderncarolyn — Wed, 20 May 2015 23:53:05 +0000

Yes!! This worked to fix the problem with phone scrolling! There is one more minor “header/navabar covering content problem”, and that happens as I am minimizing my desktop internet window. The navabar menu starts out as words and then changes to 3 lines as the window gets really narrow. I need to have it switch to the 3 lines sooner than it does, because the menu words drop below the header for a bit and then that covers up my content again.

Thank you so much! You are a programming wizard 🙂

Reply To: Mobile Fixed Header and Navabar Partially Covers Content

Lely — Thu, 21 May 2015 02:50:14 +0000

Hello There,

The Menu drop below the header at 1115px screen width. To show the menu icon at this width and prevent from going down, please add the following code in your Customizer via Appearance > Customize > Custom > CSS:

@media (max-width: 1115px){
body .x-navbar .x-nav-wrap.desktop {
     display: none;
}

body .x-navbar .x-btn-navbar {
     float:right;
     display:block;
}

body .x-navbar .x-nav-wrap.mobile {
     display: block;
}
}

Hope this helps.
Thanks.

Reply To: Mobile Fixed Header and Navabar Partially Covers Content

moderncarolyn — Thu, 21 May 2015 03:39:02 +0000

It’s almost there. The code you gave me makes the menu go to three bars instead of dropping down to the next line. But when it goes to three bars, it expands the menu out and stays that way, which covers up lots of content of course.

Thanks!

Reply To: Mobile Fixed Header and Navabar Partially Covers Content

Friech — Thu, 21 May 2015 05:07:23 +0000

Hi There,

I think the issue is on the logo that is too wide, it’s taking the space for the navbar. How about lets make the logo responsive so the navbar will always have enough space. You can add this under Custom > CSS in the Customizer.

@media (max-width:  1100px) and (min-width: 979px) {.x-navbar .x-brand {width: 55%;}}
@media (max-width:  767px) {.x-navbar .x-brand {width: 80%;}}

Hope it helps, Cheers!