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

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. 🙂

Thank you for your awesome support.

Cheers,
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.

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

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

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

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.

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