I made my website responsive for tablet and smartphone. I used hover for desktop size, but on mobile size there's hover to. I want to change the hover on the mobile device to a touch without using javascript. I heard something about the no-touch modernizr to change hover to touch event?
nav{
margin-left: 2.7em;
}
nav ul ul {
display: none;
background: #5f6975;
border-radius: 0em;
padding: 0;
position: absolute;
top: 100%;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
}
nav ul li:hover > ul {
display: block;
opacity: 1;
visibility: visible;
}
nav ul {
background: #333333;
padding: 0 1em;
border-radius: 1em;
list-style: none;
position: relative;
display: inline-block;
}
nav ul li {
float: left;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
nav ul li:hover {
background: #555555;
}
nav ul li:hover a {
color: #ffffff;
}
nav ul li a {
font: 90% helvetica;
display: block;
padding: 1.7em 2em;
color: #ffffff;
text-decoration: none;
}
nav ul ul li {
float: none;
border-top: 0.1em solid #6b727c;
border-bottom: 0.1em solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 1em 2em;
}
nav ul ul li a:hover {
background: #292F41;
}
#media only screen and (max-width:40em)
What do i need to put here to disable the hover function for mobile and make it a touch?
Related
So, I have a simple NAV that I came up with, and I'm trying to add a burger icon that will only show up when the screen is small.
Currently, my burger is just the word Menu, but I'd like to have this hidden by default. However, my code is overridden by a display:inline, that is earlier in the code. even if I add !Important.
Any one have any ideas as to how I can hide the menu element?
JSFIDDLE https://jsfiddle.net/Lwwgpx9k/
My code is below.
.html
<div class="nav">
<ul>
<li class="hidden">Menu</li>
<li class="home"><a class="active" href="#">Home</a></li>
<li class="gallery">Gallery</li>
<li class="tutorials">Tutorials</li>
<li class="about">About</li>
</ul>
</div>
.css
body {
background: #333;
}
.nav ul {
color: #e6e9e9;
position: fixed;
top: 60px;
padding-left: 5%;
text-align: center;
margin: 0;
}
.nav ul li {
line-height: 35px;
float: left;
width: 120px;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 0px 10px;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.nav ul li:hover {
background: #6A1B9A;
color: #e6e9e9;
}
.nav ul li ul {
padding: 0;
position: absolute;
top: 35px;
left: 0;
text-align: left;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
}
.nav ul li ul li {
width: 200px;
background: #555;
display: block;
color: #e6e9e9;
}
.nav ul li ul li:hover {
background: #6A1B9A;
}
.nav ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
transition-delay: 2s;
-webkit-transition-delay: 2s;
/* Safari */
}
.nav a {
font-size: 1.4em;
text-decoration: none;
color: #e6e9e9;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #6A1B9A;
color: #e6e9e9;
}
.nav a.active {
background-color: #6A1B9A;
color: #e6e9e9;
cursor: default;
}
.nav ul {
color: #e6e9e9;
position: fixed;
top: 60px;
padding-left: 5%;
text-align: center;
margin: 0;
}
.nav ul li {
line-height: 35px;
float: left;
width: 120px;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 0px 10px;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.nav ul li:hover {
background: #6A1B9A;
color: #e6e9e9;
}
.nav ul li ul {
padding: 0;
position: absolute;
top: 35px;
left: 0;
text-align: left;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
}
.nav ul li ul li {
width: 200px;
background: #555;
display: block;
color: #e6e9e9;
}
.nav ul li ul li:hover {
background: #6A1B9A;
}
.nav ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
transition-delay: 2s;
-webkit-transition-delay: 2s;
/* Safari */
}
.nav a {
font-size: 1.4em;
text-decoration: none;
color: #e6e9e9;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #6A1B9A;
color: #e6e9e9;
}
.nav a.active {
background-color: #6A1B9A;
color: #e6e9e9;
cursor: default;
}
.hidden {
display: none; !important
}
your problem is here
hidden {
display: none; !important<---- this important should be inside ";"
}
it should be
hidden {
display: none !important;
}
The padding around the link for my dropdown menu isn't clickable. When I mouse over the actual text, it changes color and becomes clickable. How can I make the padding clickable? I read that I should style it as an inline-block, but that didn't work. This is also my first post, so correct me for the countless things that I probably did wrong.
CSS:
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: left;
background-position:center;
background-image:url(sun.jpg);
}
a {
display:inline-block;
color: #6FF;
text-decoration: none;
}
a:hover {
color: #FFF;
}
ul {
color:#6FF
text-align: left;
display: inline-block;
margin: 0;
padding: 1px 1px 1px 0;
list-style: none;
}
ul li {
color: purple;
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -10px;
position: relative;
padding: 20px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding:0;
position:absolute;
top: 54px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
}
ul li ul li {
background-color:#555;
color:#6FF;
display: block;
}
ul li ul li:hover { background: #555; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
You should put the padding to the link, no the list item because the link is what is clickable.
body {
font-family:'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: left;
background-position:center;
background-image:url(sun.jpg);
}
a {
padding: 20px 20px;
display:inline-block;
color: #6FF;
text-decoration: none;
}
a:hover {
color: #FFF;
}
ul {
color:#6FF text-align: left;
display: inline-block;
margin: 0;
padding: 1px 1px 1px 0;
list-style: none;
}
ul li {
color: purple;
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -10px;
position: relative;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding:0;
position:absolute;
top: 54px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
}
ul li ul li {
background-color:#555;
color:#6FF;
display: block;
}
ul li ul li:hover {
background: #555;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<ul>
<li>First link
</li>
<li>First link
</li>
<li>First link
</li>
<li>First link
</li>
<li>First link
</li>
<li>First link
</li>
</ul>
I'm new to CSS, and if I'm honest don't really know what I'm doing. For a while now I've been trying to make the child page on the dropdown menu to be at least the same width as the parent page.
After hours of being frustrated that nothing I find on google works, I figured that I should ask someone who actually knows what they're doing. This is the (awful) code:
.menu li > a:after {
color: #fff;
content: ' ▼';
}
.menu li > a:only-child:after {
content: '';
}
#main-nav {
background-color: #6699FF;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
display: block;
float: left;
width: 100%;
}
#main-nav li {
position: relative;
}
#main-nav ul {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
position: relative;
list-style: none;
display: block;
}
#main-nav ul li {
float: left;
display: block;
position: relative;
}
#main-nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline;
}
#main-nav a:link, #main-nav a:visited {
color: #FFF;
display: block;
padding: 10px 25px;
height: 20px;
}
/*Sub menus */
#main-nav {
overflow: visible;
}
#main-nav ul {
right: 0;
}
#main-nav ul li ul.sub-menu {
position:absolute;
display:none;
margin: 0;
padding: 0!Important;
float: none;
}
#main-nav ul li:hover ul.sub-menu {
display:block!important;
float: none;
white-space: nowrap;
}
#main-nav ul li ul.sub-menu li {
background: #6699FF;
text-align: left;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
width: auto;
left:0;
}
#main-nav ul li ul.sub-menu li a {
width: auto;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
This is what it looks like when I hover over the parent 'meep' page:
http://i.imgur.com/rAXvvbP.png?1
I would like it to be the same width, starting from the left so that any excess width due to a long page name would go to the right.
I've tried changing the display type and widths, nothing yet :(
I'd greatly appreciate any help! Thanks in advance
and sorry for the terrible code
JSfiddle: http://jsfiddle.net/q5381Ly5/1/
I only change these two, add width 100%, it will get the whole width of the parent.
here is a demo http://jsfiddle.net/q5381Ly5/4/
#main-nav ul li:hover ul.sub-menu {
display:block!important;
float: none;
white-space: nowrap;
width:100%;
}
#main-nav ul li ul.sub-menu li {
width:100%;
background: #6699FF;
text-align: left;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
left:0;
}
Instead of having width auto to your submenu do change it to 100%
When using my css dropdown menu only the text of the dropdown is active which makes it more difficult to select rather than the area which would be easier (especially with mobile devices).
CSS is:
#topMenu ul {
text-align: center;
display: inline;
margin: 0;
padding: 15px 20px 17px 20px;
list-style: none;
}
#topMenu ul li {
font: bold 12px sans-serif;
text-transform:uppercase;
color:#666;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 10px 40px;
background: #EEE;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#topMenu ul li:hover {
background: #EEE;
color: #000;
}
#topMenu ul li ul {
z-index: 5000;
padding: 0;
position: absolute;
top: 38px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
#topMenu ul li ul li {
background: #EEE;
display: block;
color: #000;
border:solid 1px #999999;
}
#topMenu ul li ul li:hover { background: #EEE; }
#topMenu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Code may be a bit cumbersome.
Thanks
You can add display:block; to your anchor tag CSS to make it fill the li.
CSS:
#topMenu ul li ul a {
display: block;
}
HTML:
<ul id="topMenu">
<li>
<ul>
<li>
Link Text
</li>
<!-- more submenu items -->
</ul>
</li>
<!-- more topMenu items -->
</ul>
Try this <---> instead of use padding:10px 40px to determine the height use this:
line-height:30px <---- it replaces the padding top and bottom (20px) and add 10px of the font.
Then your CSS could be:
#topMenu ul li {
font: bold 12px sans-serif;
text-transform:uppercase;
color:#666;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 0px 40px;
line-height:30px;
background: #EEE;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
If you have a tags inside the li then make it block and the same line-height:
#topmenu ul li a {
display:block;
line-height:30px;
height:30px;
}
I would like to adjust the positioning of my drop-down menus on my navigation links. I tried adjusting "nav .folder ul li a " but i couldn't get it to move. I would like to move its position down about 10px.
CSS:
body .main-nav li > a,
body .main-nav li > a:visited {
color: #3b5998;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
#nav a:hover {
border-top: solid 4px #b7c3e6;
color: #b7c3e6;
}
.header-alignment-left.header-navigation-split #topNav { position:absolute; right: 0px }
.logo-image #topNav nav li a { padding:4px 15px; line-height: 100% }
#nav a { border-top: 4px solid transparent }
#nav .subnav { margin-top: 4 }
#nav a { border-right:0px solid #3b5998; height: 20px }
#nav li:last-child a { border-right: 0 }
#topNav nav .folder ul li a {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out }
#header #topNav nav .folder ul li {
padding: 0 24px 12px;
position: relative; }
#header { margin-top: 20px !important }
#topNav { margin-top: 40px }
#nav .subnav ul { padding-bottom: 15px !important }
#nav .subnav ul { padding-top: 15px !important }
The #topNav nav .folder .subnav div has an absolute top of 100%. If you change that to a px value (say 45px) you can move it.
#topNav nav .folder .subnav {
position: absolute;
top: 45px;
left: 0px;
background: #ffffff;
height: 0;
overflow: hidden;
opacity: 1;
z-index: 999;
}
EDIT: Ended up leaving the above below and adding
#topNav nav li.folder {
height: 32px;
}
Try to add margin-top: 10px; to nav .folder ul
add margin-top: 10px; to #topNav nav .folder ul