I'm having trouble trying to figure out why via mobile (iPhone, iPad, etc.), the sub-cateogories on my nav menu won't open. I have installed here: http://thebrlab.com/ugo-mozie/index.html Here is the original example demo of the nav menu http://thebrlab.com/ugo-mozie/menu.html (which works well when I tap the headers on mobile)
The reason that it won't work is because the device can't sense whether you are hovering over it. It only senses when you touch it and it is non-clickable
Seeing as the link goes nowhere remove the href off the a tag and if you want to have a pointing cursor (clickable content) add this css rule:
cursor: pointer;
This way it will work on mobile and the page won't keep refreshing when you accidentally click it
Related
I can't seem to figure out why on mobile devices (my website: https://www.mchna.org/?p=news) (can be reproduced in desktop browser emulating mobile as well) the div hamburger menu items (though not visible unless the hamburger menu is expanded) are laying on top of the page even though the hamburger menu has not been expanded. I've been playing around with all the tags, but to no avail. This causes the links at the bottom of my page to not work correctly. Any help is greatly appreciated!
Try wrapping the div #main-wrap on the news page inside a div #main-content similar to the markup on the other pages where this is working.
Edit: The reason for this happening is the z-index: 8 on the #navmobile which moves this "layer" in front of the other content. By giving the content position: relative and z-index: 10 (or anything higher than 8) it should work.
I've had many issues implementing a responsive navigation. Fix an issue and it creates another. T
he newest problem I have to deal with is I can click on the ul links when the responsive navigation is closed.
Have a look at www.smij.com.au on mobile device to see the issue.
Please comment if you have any other issues with the website. Appreciate all the feedback
Your li elements have a CSS rules for opacity 0 and after you show the nav they change their opacity to 1. The elements are still there, but they are not visually visible so you can click on them.
Usually dropdown menu is hiding ul dropdown element entirely with JS or with some CSS. There is much working examples on codepen.
I have a website that uses Jump Links to move between page elements (it's an interactive User Guide), and all works ok on Firefox, IE, and Edge, but Chrome and Opera ignore the 'padding'.
As the website has a fixed menu bar, this means the jump link location vanishes under the bar on Chrome and Opera.
The simple code I am using for the jump link offset is:
<a id="namexxx" style="padding-top: 100px;"></a>
What can I do to make this work with Chroma and Opera?
All the solutions I have been able to find via search do not answer the difference issue between the different browsers.
Cheers!
Padding isn't a suitable approach to repositioning an element in this way, because it would increase the size of the element itself. In the case of a link, you'd effectively be creating a larger link area, with the space above the link becoming clickable too.
You'd be better off using margin-top which would move the element down the page. Depending on the rest of your markup, you might need to set display: inline-block; on the link element too.
I am using bootstrap with my wordpress site , its perfect when we uploaded to live server but when we hover over/ click nav item in mobile this is what happens
right now if i click on any of the nav items its not clicked and bottom one comes just right to upper one , now i don't remember if i modified some css for navigation code while doing this site but what i expect a single css rule will make it fine can someone help me to fix this ?
In hover and click some css get overrides which is applied for desktop version.
You have to override desktop version css with media query for mobiles.
I have a little issue with a menu on my Joomla 2.5 page. It's a module and I used several CSS properties like:
visibility:visible; z-index:99999!important
Yet, the menu does not delays for me to click it.
I want the menu to be clickable when the reader mouse over and mouse on the second level menu. I don't want it to disappear any more.
A sample of what I want the menu to look like can be found here: http://vitafoam.com.ng
On the css class ul.navi ul.level2 on menustyle.css, remove the top: 91px property. It is throwing your level2 menu down, and keeping you from hovering it.
Removing the top property fixed the problem, at least on my Chrome Debug.