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.
Related
Please help me to fix these issues in CSS (without JS). I am studying and can't find answers to some problems with navigation. Please don't blame me :)
I created navigation and first screen for the site but stumbled with these questions. Here is a screenshot with all things: https://prnt.sc/ln3ytx and my pen on Codepen: https://codepen.io/a007mr/pen/mQKyYM
How to make background hover for all line?
My code is .menu-item ul a:hover {color: #000000; background: #d2d4d6;
but it doesn't work as well. How to make it like this: https://prnt.sc/ln3mvm
When I open the drop-down menu, part of navigation is jumping to the right. How to avoid this jump?
How to make navigation button in the corner for any desktop size? I am using
margin: 15px;
but it doesn't work well when I will make more screen resolution. It is not responsive. The button will not be in the right corner if I choose the larger desktop.
The same issue with all navigation. How to make a position for navigation
in one place for any desktop size?
How to open dropdown through click (not hover) and hide drop-down menu only through click? My code li:hover > ul. If I change on li:active > ul then drop-down menu appears only when I hold the button. How to make like *click button -> we show drop-down menu and can choose something -> *other click on "Learn more" and menu is hidden.
How to make margin for below the main button? :)
I wrote margin-top: 20px; but it doesn't work.
How to make the background of all navigation without margin?
What's wrong? How can I fix it? Please, help.
I will be try give you some reply:
How to make background hover for all line? My code is .menu-item ul a:hover {color: #000000; background: #d2d4d6; but it doesn't work as well. How to make it like this: https://prnt.sc/ln3mvm
1) Try uses block elements. Remember that css property
display: block; makes your element a block element.
When I open the drop-down menu, part of navigation is jumping to the right. How to avoid this jump?
2) Your items in the list must be made as blocks and it item (li>a) need to be
increased.
Common example:
https://codepen.io/bear-wolf/pen/YRvoWO?editors=1100#0
I have tried to post code here recently, but it is working for some code posted only. So I would like to see my site dropdown not show. In this site, the drop-down Services can't display its sub-menu. Please take a look at my site and guide me how to fix the dropdown menu?
I tried to set z-index with various value but it's not working.
You need to remove overflow: hidden; from .navbar-default. The submenu ul is overflowing the div.navbar-default, but you are hiding it.
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'm a newbie / self-taught html guy. I need to edit my (static) website's menu to make it mobile friendly for google within the next 4 days. I'm breaking my head trying to figure out how to do it, but no luck so far, so I'm getting desperate.
The way I'm making my entire website mobile friendly is by setting the viewport and changing the CSS if screen width is less than Xpx.
I need to use ONLY CSS to transform the following menu, to a menu button. ie in mobile view, have the entire menu hidden within a button at the top of the screen and make the menu appear/dropdown by clicking on the button.
This is a sample menu I have on my website: www.oikotrust.gr/en
And here's the mobile friendly one I managed so far (uploaded it here just for reference): www.oikotrust.gr/index-mobile.html
<div class="menu">
<div class="menu_btn here">ΑΡΧΙΚΗ ΣΕΛΙΔΑ</div>
<div class="menu_btn">ΕΝΟΙΚΙΟ</div>
<div class="menu_btn">ΦΩΤΟΓΡΑΦΙΕΣ</div>
<div class="menu_btn">ΕΠΙΚΟΙΝΩΝΙΑ</div>
</div>
related CSS in original page
.menu{margin-top:50px; float:left; margin-left:none;}
.menu_btn{height:35px; font-weight:bold; padding-top:10px; width:100%; padding-left:20px; font-size:18px;}
.here{background-image:none; background-repeat:no-repeat; color:#E5541C;}
All and any help much appreciated!
you don't need to "transform" the menu, not neccessarely. You can use media queries to style your content depending on your viewport, and use visibility property to set up different elements for different viewports.
Small tip: always write the css for wider media queries at the top, following with the smaller wide media queries next until you get to your smallest viewport.
I wrote an article a while ago maybe this will help you:
http://readingssexy.com/blogpost/how-to-use-media-queries.html
As class menu is the parent class for all its subchild you can hide this class using media query for mobile screens, you can put a div just above your menu and place your button code there so what will happen is, on mobile screen you menu will be hidden first when user will click on this button you can show menu to him or toggle the menu open/close state. Hope you get this.
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