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
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;
}
Good evening,
I have problem with my menu links. When I see it on mobile and zoom it for text, links just jump out from pannel to next row.( http://www.abclinuxu.cz/data/prilohy/0/6/214560-img_1705-3567267490611876903.PNG ) I have set position fixed etc.. How can I force this bug? Thank you for advices!
HTML:
<div id="nabidka">
<div id='cssmenu'>
<ul>
<li><a href='#about'>O nás</a></li>
<li><a href='#cenik'>Ceník</a></li>
<li><a href='#sluzby'>Služby</a></li>
<li><a href='#kontakt'>Kontakt</a></li>
</ul>
</div>
</div>
CSS:
#nabidka {
width:550px;
height: 90px;
margin-left: 1.5em;
padding-top: 5px;
float:left;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
list-style: none;
line-height: 80px;
margin: 0 auto;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
width: auto;
line-height: 80px;
height:90px;
}
#cssmenu > ul {
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
font-size: 20px;
text-transform: ;
text-decoration: none;
color: white;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
color: #f26c4f;
}
#sipka {
position: absolute;
left: -1000px;
}
#cssmenu #menu-indicator {
position: absolute;
bottom: 0;
display: block;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-color: white;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
I cannot see what it is supposed to look like. Try to share a link to your html file.
However, I believe the issue lies in your CSS. You are using a combination of px values combined with em. Try to put the line-height for #cssmenu in em, perhaps that is the issue.
From a really fast look at your code, i think the issue is related to the element getting collapsed due to the "float: left".
This issue is easily fixed with .clearfix method Clearfix snippet. You fix this issue by placing the .clearfix class on the parent element or on any parent of the elements you float.
Another simple solution, which i would not recommend is using overflow:hidden;
Hope this helps.
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%
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?
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;
}