[tdgarveyParticipant]

Hi,

I was able to figure out how to keep my top bar with a image in the background and nav bar top fixed, but I am having trouble with them overlaying the content.

You can see here
http://test.thegarveygroup.com/wpstage/

The content starts above top bar and nav bar, which is not what I want.

Here is custom CSS I used to hold them to the top.

.x-topbar .x-social-global {
display: none !important;
}
.x-topbar {
background:url(http://test.thegarveygroup.com/wpstage/wp-content/uploads/2015/09/top_bar.jpg) no-repeat top center;
background-size: 100% auto;
min-height: 10px;
}
header.masthead.masthead-inline {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 2000;
}

[ZeshanMember]

Hi there,

Thanks for writing in!

Please replace your CSS code with this:

.x-topbar .x-social-global {
display: none !important;
}
.x-topbar {
background:url(http://test.thegarveygroup.com/wpstage/wp-content/uploads/2015/09/top_bar.jpg) no-repeat top center;
background-size: 100% auto;
min-height: 10px;
}
header.masthead.masthead-inline .x-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2000;
}

Thanks!

[tdgarveyParticipant]

Hi,

Thanks for your quick response.

Works great and looks like I just left off the one selector.

One more question – I noticed the when it goes to mobile the menu is not fixed. Is this the proper way to hold the menu in place? It seems to work.

@media {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: fixed;
}
}

[LelyModerator]

Hello There,

Glad it works.
Above code should work on all views/screen (desktop and mobile).
For mobile only CSS the following should work:

@media (max-width: 480px){
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: fixed;
}
}

Hope this helps.

[tdgarveyParticipant]

Hi

#1 – The updated code does hold the menu and top bar in place when on a mobile phone if I view the page in landscape mode, but if I load the page holding the phone in portrait the nav bar scrolls and the topbar holds in place.

If I browse the site using a desktop and reduce the browser window to engage the mobile menu the navbar scrolls and the top bar holds in place.

When on a mobile phone if I scroll downward and then try to come back up main content gets stuck underneath the navbar and topbar.

My goal is to hold both the topbar and navbar in place on both desktop and mobile and not have the content get stuck under.

#2 – When I open the mobile menu on a mobile phone I cannot scroll the menu to reach any of the other menu selections other than what appears on the screen. When I scroll with my finger I can see it scrolling the page underneath the menu.

#3 – I sure it’s possible, but in the mobile navbar I want to change the submenus to the same background options as the initial menu (transparent percentage) and not a solid back as they are now.

Really appreciate all the help.

[JadeModerator]

Hi there,

#1 & #2 I am not that certain what you mean on the first two items but if I understand it correctly, you can achieve what you are wanting to do if you will remove the previous code given. If that does not do anything, can you please make is more clear by providing maybe some screenshots?

#3 Please add this CSS

@media screen and (max-width: 980px) {
    .x-navbar .sub-menu {
        background-color: transparent;
    }
}

Hope this helps.

[tdgarveyParticipant]

Sorry to confuse.

#1 – On phone the content gets stuck under the topbar and navmenu. See screen grab #1.

#2 – I cannot scroll down on the phone to access sub menu options if they are off the screen. See screen grab #2.

#3 – Fixed.

[ZeshanMember]

Hi there,

#1: To fix this, add following CSS under Custom > CSS in the Customizer:

@media (max-width: 979px) {
  body.x-navbar-fixed-top-active .x-navbar-wrap {
    min-height: 90px;
  }
}

#2: This is because of navbar fixed positioning while scrolling. Fixing the navbar on mobile can cause some issues like the menu items being hidden from the bottom. It could be possible to resolve this issue while still keeping the navbar fixed with custom development, but regretfully this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

[tdgarveyParticipant]

Hi,

I am going to go back and allow the navbar to scroll on mobile and hold fixed on desktop.

Is it possible to allow the topbar to now scroll on mobile instead of holding it fixed?

[RupokMember]

Hi there,

You can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 767px) {
header.masthead.masthead-inline .x-topbar {
  position: absolute;
}
}

Hope this helps.

Cheers!

[tdgarveyParticipant]

Hi,

Works great.

Thanks for all the help.

[NicoModerator]

Glad to hear that.

Feel free to ask us again.

Have great day! 🙂

[tdgarveyParticipant]

Hi,

Sorry to revisit this, but the CSS you gave me to allow the topbar to scroll on mobile was not working as it turns out. It is holding fixed.

@media only screen and (max-width: 767px) {
header.masthead.masthead-inline .x-topbar {
position: absolute;
}
}

[RupokMember]

Hi there,

Thanks for updating. You have added this code later on your customizer that creating the issue –

header.masthead.masthead-inline .x-topbar {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2000;
}

I am not sure why you have added this again for the same class. Please remove this to get expected result.

Hope this helps.

Cheers!

[tdgarveyParticipant]

Hi,

That part holds the topbar fixed on desktop. I need it to scroll on mobile only.

Thanks.

[Author]

Posts