I'm using a Glyphicon inside of a div to open up the mobile menu called Mmenu on mobile devices. The action works fine, but the Glyphicon shows above the menu rather than hidden below it. I've changed the Mmenu's and Glyphicon's z-index to 100 and 99 respectively but still nothing.
I suspect it's related to another issue that's causing the page content to slide over but not the header where the div is contained?
Is anyone able to help me understand why?
Thanks.
website
Not sure why the problem is happening, but you can work around it with this CSS:
.mm-menu {
z-index: 200 !important;
}
This puts the fixed menu panel above the icon.
Updated FIDDLE
Related
I have a logo that takes you to startpage when you click it. This works in desktop view but not on mobile view!? What can I do to make this work also in mobile view?
I have a vue-project.
The homepage is located at eagleinstruments.se
Hope you can help med solve this!
Best regards / Lisa
It's because the menu navbar was overlapping on your logo. Your logo do have a z-index: -1; but here, the fix is to set some width to the .wrap .hamburger menu.
This could be enough, but of course you can make something more complex with flexbox or alike to make it more responsive depending of what can happen.
width: auto;
I found this out by inspecting with the chrome devtools.
My submenu disappeared all the sudden and doesn't show anymore when I hover over the menu item. I checked the menu section on my WP dashboard and it's there and assigned to show. The submenu still show on mobile device but on full browser the submenu items stopped showing up. I deactivated all the plugins to check if there is a conflict but the event doesn't appear to be plugin related. This is more of a CSS problem that I'm having.
Here's my website: http://www.apcm.ca
My CSS : http://www.apcm.ca/wp-content/themes/apcm/css/style.css?ver=4.6.1
You'll notice that your #header is set to overflow:visible in mobile, and that if you switch back to desktop resolution, the submenu will start working. So all you need to do is add overflow: visible to the #header in all resolutions.
change overflow:hidden to overflow:visible for the section#header
I'm working for a responsive website on a slider like FB App. It works fine, but if the user scrolls, the open navigation moves with the content. I'm trying to put position: fixed to the element. This works,but if the navigation element is larger than the screen the rest of the content cannot reached. Example: http://lucie-hauri.com.beethoven.ch-meta.net/ (just put the screen to a width of about 300px an the mobile Icon appears, click on it for example).
Has anyone an idea how to fix this?
Thanks for help, regards
Thomas
I don't know if this is the cause, but you have a javascript error (check the console), which may break things up.
I'm developing a website and on its home page I have some sliders.
When I use these sliders I used to get horizontal scroll. I managed to fix that using overflow-x:hidden; at the css for the body element.
My problem is that When I click and drag the page to the right the scrollbar doesn't appear, but the user have the same effect as if he was using the scrollbar.
I received the html/css from a third part front-end developer and I'd prefer not to have to modify his css much.
Would you have any tips to fix this behavior without having to do further changes in the html/css structure?
Thanks in advance for any help.
My menu looks great in firefox and chrome. But IE. It dissapears. Anybody can help me ?
http://tinyurl.com/6yzd2jc
Here's my guess as to what's happening. Could be totally wrong.
The dropdown is supposed to disappear when the user mouses out of the link or the dropdown itself. But the problem is, there's a gap of a few pixels in between the link and the dropdown; this shows up in all browsers; I had trouble with it in Chrome before I even opened IE.
But when I did open it in IE, I saw that the links were even further away from the dropdown menus, so the problem was exacerbated.
If you go back to the CSS and make sure that there's no gap in between the link and the dropdown menu, does that fix the problem?
Edit to actually answer the question
There are a few CSS changes you could quickly make to fix the problem:
Get rid of the height style on #mNav
Add a <div> with the style clear: both to #topNav, after the <ul>
Give each ul li a style of height:25px
It's not pretty, but I think that solves it.