[moderncarolynParticipant]

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

[NicoModerator]

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.

[moderncarolynParticipant]

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!

[LelyModerator]

Hello ModernCarolyn,

Please edit above CSS to this:

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

Notice the extra bracket.

Hope this helps.

[moderncarolynParticipant]

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.

[ChristopherModerator]

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.

[moderncarolynParticipant]

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 🙂

[LelyModerator]

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.

[moderncarolynParticipant]

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!

[FriechModerator]

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!

[moderncarolynParticipant]

Everything seems to be working good now! Thank you so much!!

[moderncarolynParticipant]

Thanks!

[ZeshanMember]

Hi there,

Upon checking, header on both homepage and other pages looks in one line to me (see screenshots below). Would you mind confirming again? Perhaps it’s a caching issue, I’d advise clearing your browser’s cache or testing on a different browser.

Homepage: http://prntscr.com/77t2kc
Inner Pages: http://prntscr.com/77t30d

Thanks!

[moderncarolynParticipant]

Yes, it must have been a cache issue. Header is in one line now and working perfect. Thank you!

[FriechModerator]

You’re more than welcome, glad we could help, Cheers!

[Author]

Posts