[stacey aParticipant]

Hello!

I have my Header > Navbar set of FIXED and it works as described on my laptop/desktop but on my mobile smartphone the Nav bar is not fixed.

Is there a way to do fix the navbar on all devices??? Also I have Header Widget Area enabled (cool feature BTW) and noticed that also stays FIXED on my laptop (but not mobile) can this be made to stay fixed on all devices as well???

Thank you & Cheers

Stacey

[ChristianModerator]

Hey Stacey,

Please add the code below in the Appearance > Customize > Custom > CSS.

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

Hope that helps. 🙂

[stacey aParticipant]

Good Morning!
This does fix the Navbar at the top on mobile but not the header widget. Any thought on that?

Thank you for your awesome support.

Cheers,
Stacey

[Paul RModerator]

Hi Stacey,

To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[stacey aParticipant]

This reply has been marked as private.

[CousettMember]

Try adding some CSS code under Appearance -> Customize -> Custom -> CSS

.x-btn-widgetbar {
position: fixed;
}

[stacey aParticipant]

Thank you for your quick reply. While the header Widget icon does stay fixed at the top – the problem is that when it is activated (and the “Widget Window” expands) the widget window does not stay fixed to the top so:

1. If you see the expanded widget window (ie you are at the top of the page) as you scroll down the page the expanded widget window disappears.

2. If you are already scrolled somewhat down the page – when you click on the widget header icon you see nothing even though the widget window is expanded.

Anyway to keep the widget window fixed to the top?

Don’t know CSS (newbie but it is on my short list to learn at least some) I tried the this but it didn’t work:

.x-widgetbar-inner {
position: fixed;
}

Then I tried this:

.x-btn-widgetbar-inner {
position: fixed;
}

I have tried numerous different iterations and variations of different things without success.

Any other suggestions?

Thank you
Stacey

[stacey aParticipant]

I have also run into a small issue with fixing the Navbar at the top. The Navbar stays fixed just fine, but when I click on the mobile button I cannot see my whole Primary menu items on small mobile devices like iphone 4s -barely can see the menu items on the Samsung 4s (my Note 3 is no problem) (my I have 10 Primary menu items). The problem is is that the primary menu will not scroll.

How can I add a scroll bar feature to the Primary (and Secondary menu) items.

It is funny that on Android it looks like I have scroll but it does not work on the menu…maybe it is working one the layer below?? On Apple iphone I have nothing.

Thank you for any help you can provide. Love the theme.

Cheers,
Stacey

[ChristianModerator]

Hey there,

Please try adding the code below in the Appearance > Customize > Custom > CSS.

@media (max-width: 979px) {
.x-widgetbar {
position: fixed;
}
}

I’ve tested your site on a mobile device and the navigations seems to work fine. Can you give us screenshots?

Thanks.

[stacey aParticipant]

Hello,

First apologies for this long post.

To recap I have the following code in my CSS Customizer which has FIXED the Navbar, Header widget and the expanded widgetbar to the top on mobile/small format devices As far as I can tell this works fine.

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

.x-btn-widgetbar {
position: fixed;
}

@media (max-width: 979px) {
.x-widgetbar {
position: fixed;
}
}

I wanted the menu on mobile to be collapsed by default and when you click (touch) a primary menu item then sub menu item would be shown (i.e.activating the primary menu items would only expose the sub menu items). To accomplish this I have the following code.

In CSS Customizer:

@media (max-width: 979px) {
.x-navbar .x-nav ul.sub-menu {
display: none !important;
visibility: hidden !important;
}
.x-navbar .x-nav ul.sub-menu.visible {
display: block !important;
visibility: visible !important;
}
}

In JavaScript Customizer:

jQuery(document).ready(function($) {
windowsize = $(window).width();
if(windowsize < 980) {
var subMenuLink = $(‘.x-navbar a.sf-with-ul’),
subMenu = $(‘ul.sub-menu’ );

subMenuLink.click(function(e) {
e.preventDefault();
$(this).siblings(subMenu).toggleClass(‘visible’);
});
}
});

Now the Menu expands and collapses fine. My problem is the lack of scrolling so on small/mobile devices the user cannot get to/ see/ or use all of the menu items.

To see what I mean please try the following – you can do this on a desktop or laptop if it is easier.

1. Go to http://www.muttmaps.com

2. Downsize browser size so that it renders the responsive/mobile layout.

3. Click on mobile button to show primary menu. If your browser screen is “long” enough you will see 10 menu items AND content below the menu).

4. If you place you mouse anywhere on the menu and try to scroll “down” you will notice that the content below (and underneath) the menu starts to scroll – I don’t think this should happen.

5. Now click on “SERVICES” menu item. Do you see 9 sub menu items? If not try to scroll down to see…you can’t. Now if you can see the 9 menu items click on the sub-menu item “TRAINING” can you see the 13 items under TRAINING? Do you see what I mean about the menu not scrolling?

This is really a problem when you are using mobile smart phone because most screens aren’t big enough to show the PRIMARY menu.

I think the the when the user expands the menu that menu should/needs to scroll up and down (like it would start to disappear under the Navbar as the user scrolls). There does seem to be a scroll but it only scroll what is underneath the menu and not the menu itself.

If you still need screenshots or I could do a quick video let me know. I think you should be able to reproduce this.

Is there a tweak here that can get this working properly?

Thanks
Stacey

[ZeshanMember]

Hey there,

Thanks for writing in!

It could be fixed with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer, or a service like WerkPress or Elto to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[stacey aParticipant]

Ok no problem. Sorry to be a bother.

I didn’t think it was outside the scope of of support as I was really trying to bring the menu/navigation to have similar functionality in the mobile environment as the laptop.

My apologies and thank you for your excellent support.

Stacey

[RubinKeymaster]

You’re welcome!

[lostimaginationParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi @lostimagination,
Would you mind providing us with your website URL so we can take a closer look?
Many thanks.

[Author]

Posts