I'm doing a good job in styling the mobile menu for the client website but have some coding issue that trying to bring logo section and hamburger button behind the mobile menu.
So when the user clicks on hamburger button they not going to see the logo section and hamburger button.
So I already did a z-index but don't work. Here a link to a site so re-size your screen to see the menu and don't have any javascript & jquery add to site at the moment.
Site Preview:
https://brandonpowell.github.io/alegacyleftbehind/
#media (max-width: 480px){
nav{
height:100%;
width:100%
}
nav .bottom-navbar{
background-color:#212121
}
nav .bottom-navbar .logo{
position:absolute
}
nav .bottom-navbar .bt-close{
position:absolute;
background-color:#51237f;
padding:9px;
display:block;
top:0;
width:100%
}
nav .bottom-navbar .bt-close .close-image{
width:50px;
padding:10px;
float:right;
}
nav .bottom-navbar .bt-close .main-title{
color:white;
padding:20px 10px;
text-transform:uppercase;
font-size:13pt;font-family:Montserrat,sans-serif;
letter-spacing:1px
}
nav .bottom-navbar .nav-menu{
display:block;width:34px;margin:36px;float:right
}
nav ul li{
float:none;
display:block;
letter-spacing:1px;
padding:1.9em 15px;
border-bottom:2px solid #2e2e2e;width:100%
}
nav ul li a{
color:white;
font-size:1.6em
}
li:hover{
background-color:#2e2e2e;
text-decoration:none;
color:#ffffff
}
ul{
padding-left:0px;
margin:0;
}
}
Have you considered changing their opacity to 0 and setting their pointer events to none instead of attempting to hide them behind the menu?
Visually it will have the same effect, and can be triggered with jQuery by adding a class to both. The CSS code for that class could be:
.hidestuff{
opacity:0;
pointer-events:none;
}
Once you remove this class they will go back to being visible and clickable. This has the added benefit of allowing for them to fade in and out using CSS transitions.
Andy
Related
i have a problem fitting text into blocks (dropdown menu) in CSS.
The code is in Serbian language, but if needed i can translate it to english.
Ok, so i have "Ponuda usluga", when i mouse over that, i get dropdown menu with "Lov" , "Obuka Pasa", "Ribolov" and "Obezbedjivanje potrebne dokumentacije", but the problem is the last one does not fit and proceedes to go under in next line, like shown on screenshot1 here https://ibb.co/YbTytJw (NOTE: at the screenshot i was hovering over "ribolov", thats why its orange).
I would like it to be like this screnshot2 https://ibb.co/dW65Tyx.
Same problem when i hover over "Lov" (that opens a new dropdown menu with 2 options there) like shown on screenshot3 https://ibb.co/0ZKxVWj (Note: I added >> to point out that there is another dropdown menu, and again, i was hovering over "lov", so thats why its orange). Same as the first problem, i need it to say "lov na sitnu divljac" and underneath "lov na krupnu divljac", instead it says "lov na sitnu", "lov na krupnu" and underneath "divljac". I need it to be like screenshot4 https://ibb.co/8zspMY0.
<style>
*{
padding:0;
margin:0;
box-sizing:border-box;
}
html{
height:100%;
}
.wrapper{
min-height:100%;
width:100%;
position:relative;
}
body{
height:100%;
background:#ddd;
}
h2{
padding:50px;
background-color:#161B21;
color:#f0f1f5;
font-family: big john;
text-align:center;
font-size:30pt;
letter-spacing:15px;
}
.navigationDesktop{
background-color:#161B21;
}
nav{
height:40px;
width:700px;
display:block;
margin:0 auto;
text-align:center;
text-transform: uppercase;
}
nav a{
display:block;
text-decoration:none;
font-family:monospace;
font-weight:bold;
font-family:13pt;
color:white;
}
nav a:hover{
background-color:#F4A950;
color:#f0f1f5;
}
nav ul{
list-style:none;
}
nav ul li{
float:left;
width:140px;
height:40px;
line-height:40px;
background-color:#161B21;
list-style-type: none;
}
nav ul ul li{
position:relative;
display:none;
}
nav ul ul ul{
display:none;
}
nav ul li:hover ul li{
display:block;
animation: navmenu 500ms forwards;
}
#keyframes navmenu{
0%{
opacity:0;
top:5px;
}
100%{
opacity:1;
top:0px;
}
}
nav ul ul li:hover ul{
display:block;
position:absolute;
width:140px;
left:140px;
top:0px;
}
</style>
Here is the pastebin of the HTML https://pastebin.com/MLweR454
And here is the pastebin of the CSS https://pastebin.com/mtszKhNu
That is happening because you are trying to set each nav link block size by using line-height:40px, that creates 40px of space between each line of text. What you want do to is set your nav a to line-height:1.1;, no px, and make the size of the link block be based of the amount of text and padding, by adding padding: 15px 0;
Thank you to everyone who have been helping me with my first project.
I have managed to make this responsive nav bar
1.However when the mobile menu is active the "burger" button is stuck to the left and small.
I have tried to make sub menus but had no success.
3.I have a logo i would like on the same line as the navigation menu but when the media is on a mobile devise (480px) I'm trying to have the logo on the top and center and the naviagtion on the line below.
any help will be great. Thank you in advance.
this is the link to my jsfiddle
https://jsfiddle.net/jkfb4Lus/
<body>
<div id="container">
<header id="header">
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>About</li>
<li>Writings</li>
<li>Extra</li>
<li>Contact Us</li>
<li class="icon"><a id="button" href="javascript:void(0);" onclick="myFunction()">☰</a></li>
</ul>
</header>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</div>
</body>
body{
margin:0;
padding:0;
}
*{
margin:0;
padding:0;
}
#header{
width:100%;
height:65px;
background-color:white;
}
/*remove margins and padding from the LIST, and add a black background color*/
ul.topnav{
width:100%;
height:65px;
float:right;
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
text-align:right;
}
/*float the LIST (li) items side by side*/
ul.topnav li{
display:inline;
}
/*float the LIST (li) items side by side HOVER*/
ul.topnav li:hover{
border-bottom:;
}
/*style the (a)links inside the LI items*/
ul.topnav li a{
position:relative;
display:inline-block; /* so it accepts top/bottom padding */
text-decoration:none;
padding:px;
color:#FFF;
font-weight:500;
width:75px;
text-align:center;
line-height:65px;
width:100px;
}
/*change backround color of the LINKS (a) on hover*/
ul.topnav li a:hover{
background-color:#F1CBFF;
color:purple;
transition:background-color 1.0s ease;
}
/*hide the list (li) items that contains the link that
should open and close-quotethe topnav on small screens*/
ul.topnav li.icon{
display:none;
}
/*when the screen is less than 680px hide,hide all list (li)items,
except the first one("Home"). Show the list(li) item that contains
the link (a) open and close the topnav (li.icon)*/
#media screen and (max-width:680px){
#header{
height:auto;
}
/*remove margins and padding from the LIST, and add a black background color*/
ul.topnav{
height:auto;
}
ul.topnav li:not(:first-child){
display:none;
}
ul.topnav li.icon{
float:right;
display:inline-block;
}
/*float the LIST (li) items side by side*/
ul.topnav li{
float:left;
}
}
/*the "responsive" class is added to the topnav with Javascript when the uses
clicks on the (icon). This class makes the topnav look good on small screens*/
#media screen and (max-width:680px){
ul.topnav.responsive {
position:relative;
}
ul.topnav.responsive li.icon{
position:absolute;
right:0;
top:0;
}
ul.topnav.responsive li {
float:none;
display:inline;
}
ul.topnav.responsive li a{
width:100%;
display:block;
text-align:center;
padding:10px;
}
ul.topnav li a:hover{
border-bottom:1px purple solid;
transition:all 1.0s ease;
}
}
Have you tried using flexbox?
ul.topnav.responsive li.icon{
display: flex;
align-items: center;
}
I have an issue with iOS not loading the dropdown menu links, it works fine in others, only iOS.
Live Site: http://sandbox.myramani.com/espace/
Basically when you view it via any iOS browser, the navigation dropdown links do not link to the interior pages, instead it just refreshes the homepage. Can anyone help me figure out why this is occurring?
CSS:
#nav ul li ul.dd {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:absolute;
z-index:99;
top:60px;
left:0px;
margin-left:0px;
width:220px;
background:#fff;
display:none;
box-shadow: 0px 0px 10px rgba(0,0,0,.4);
padding-bottom:10px;}
#nav ul li:hover ul.dd, #nav ul li:focus ul.dd {
display: block;
}
What is the reason for:
onclick="return true"
on the ? Could be the issue. I don't see the need for an JS on those.
IOS ignores any links that have display:none OR visibility:hidden -- even if the :hover shows it. I can't remember the specifics.
Now I have the quote from Apple:
"if the contents of the page changes on the
mousemove event, no subsequent events in the sequence are sent."
Replace with the following:
#nav ul li ul.dd {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:absolute;
z-index:99;
top:60px;
left:0px;
margin-left:0px;
background:#fff;
opacity:0; /* added */
width:0px;/* added */
height:0px;/* added */
overflow:hidden;/* added */
box-shadow: 0px 0px 10px rgba(0,0,0,.4);
padding-bottom:10px;
}
#nav ul li:hover ul.dd, #nav ul li:focus ul.dd {
opacity:1;
width:220px;
height:auto;
overflow:visible;
}
I am designing a website, and I want to have a nav bar that resizes to the size of the screen.
This is what I have right now for html:
<nav>
Item 1
Item 2
Item 3
Item 4
</nav>
and css:
nav a {
text-decoration:none;
font-size:2em;
color:#fff;
width:25%;
display:block;
float:left;
background-color:#000;
text-align:center;
}
http://jsfiddle.net/GJVqR/
This works fine until the screen gets down to a certain size at which point I want the menu items to stack on top of each other.
Is there a way to do this without resorting to JS?
EDIT: After receiving a few answers I feel I need to clarify: http://i.stack.imgur.com/9ID5N.png
This is what I am looking for when the screen gets too small.
Set the
min-width
CSS property:
nav a {
min-width: 100px;
text-decoration:none;
font-size:2em;
color:#fff;
width:25%;
display:block;
float:left;
background-color:#000;
text-align:center;
}
You may use min-width instead width, and have them float or not :
http://jsfiddle.net/GJVqR/2/ http://jsfiddle.net/GJVqR/3/
nav a {
text-decoration:none;
font-size:2em;
color:#fff;
min-width:25%;
display:inline-block;
float:left;
background-color:#000;
text-align:center;
}
I found a solution using the #media css
#media (max-width:21.5em){
nav a {
width:100%
}
}
http://jsfiddle.net/GJVqR/4/
I've modified some existing CSS code i found to develop a menu. It all works fine except when i hit the drop down menu. if there there is another HTML component on the page, the menu stays behind the component instead of it staying on top (i hope my description makes sense).
Here is the CSS:
#navMenu{
/*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/
margin-left:2px;
/*width: 944px;*/
width:100%;
font-weight:normal;
font-size:15px;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
/*removes the bullet point*/
list-style:none;
float:left;
position:relative;
background-color: #F9F9F9;
}
/*for top level */
#navMenu ul li a{
text-align:center;
font-weight:bold;
font-size:0.8em;
line-height:height;
font-family:Arial,Helvetica,sans-serif;
text-decoration:none; /*remove underline*/
margin:-1px;
/*height width for all links*/
height:30px;
width:150px;
display:block;
/*border-bottom: 1px solid #ccc;*/
color: #00611C;
}
/* hiding inner ul*/
#navMenu ul ul{
position:absolute;
visibility:hidden;
/*must match height of ul li a*/
top:28px;
}
/*selecting top menu to display the submenu*/
#navMenu ul li:hover ul{
visibility:visible;
}
#navMenu li:hover {
/*background-color: #F9F9F9;*/
background-color: #DBDB70;
border-radius: 5px;
}
#navMenu ul li:hover ul li a:hover{
/* color: E2144A;*/
color:#E2144A;
}
#navMenu ul li a:hover{
/*color: E2144A;*/
color:#E2144A;
}
Would anybody be able to tell me whats missing to enable the drop down menu to stay on top?
thanks.
It would be useful to have the HTML code, not just the CSS, to troubleshoot this. But with just the CSS you posted, look into setting a z-index on the elements that are layered backwards from the way you would like.
http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index?redirectlocale=en-US&redirectslug=Understanding_CSS_z-index
use z-index.
#navMenu{
/*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/
margin-left:2px;
/*width: 944px;*/
width:100%;
font-weight:normal;
font-size:15px;
z-index:1;
}
Try giving your menu a z-index: 1; (or higher). You can also lower the z-index of whatever content is covering up your menu.
You need to set the parent that will wrap your menu to be in position: relative, this could be a body or maybe an outer wrapper. Then you can use absolute position to place it always at the top and specify some z-index:
For more information: see this z-index property information in here:
https://bytutorial.com/tutorials/css/css-z-index