I'm running into a problem with the mobile version of a site I'm working on. I added the following CSS to the nav menu to make all of the list items full width and stretch across the length of the nav bar (for desktop users).
.menu {
width:100%;
border:0px solid black;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.menu ul {
margin: 0;
padding: 0;
}
.menu li {
list-style: none;
text-align: center;
width: 14.285%; /* fallback for non-calc() browsers */
width: calc(100% / 7);
box-sizing: border-box;
}
/*
#media only screen {
.menu li {
width:100%;
width: calc(100%/1);
}
}
*/
.main-nav {
border: 0px solid black;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.menu li.menu-item-128 {
border:0px solid black;
border-bottom-left-radius:8px;
border-collapse:collapse;
}
.menu li.menu-item-128 a {
border:0px solid black;
border-bottom-left-radius:8px;
border-collapse:collapse;
}
.menu li.menu-item-642 {
border:0px solid black;
border-top-right-radius:0px;
border-bottom-right-radius:8px;
}
.menu li.menu-item-642 a {
border:0px solid black;
border-top-right-radius:0px;
border-bottom-right-radius:8px;
}
The .menu li rules are what's causing this problem (http://s22.postimg.org/watzsv0wx/mobile_Nav.jpg)
I want it to look like this
(http://s8.postimg.org/x0brxplhx/mobile_Nav2.jpg)
But the only way I've managed to get the mobile nav menu to look normal is by commenting out the .menu li rules, which prevents the list items from properly stretching in desktop view. The "#media only screen" was my attempt at resolving the problem, but it didn't really work out.
Related
I have a dropdown menu styled with css that can have an infinite number of items and levels. The issue I have after getting it to work is that large lists and multiple levels can cause the list to run off the page either at the bottom or too the right. Is there a way with css to determine that it has run off the page and then move the list so it remains visible? I looked at a few examples such as this one:
How to avoid a vertical dropdown menu to add the vertical scrollbar when at bottom?
But I couldn't get it to work correctly with the css I had. That code is available here:
(Note there is a reference to jsfiddle dot net that this editor won't let me post so append the following to the jsfiddle dot net URL /petehelgren/SLyPL/22/
nav.medianav ul {
width:300px;
}
nav.medianav ul {
margin:0px;
padding:0px;
}
nav.medianav li {
list-style: none;
}
nav.medianav ul.top-level {
background:#efefef;
white-space:nowrap;
}
nav.medianav ul.top-level li {
border-bottom: #fff solid;
border-top: #fff solid;
border-width: 1px;
}
nav.medianav a {
color: #000;
cursor: pointer;
display:block;
font-size: 16px;
height:25px;
line-height: 25px;
text-indent: 10px;
text-decoration: none;
width:100%;
}
nav.medianav a:hover {
text-decoration: none;
color:#fff;
}
nav.medianav li:hover {
background: #fcaf17;
color:#fff;
position: relative;
}
nav.medianav ul.sub-level {
display: none;
}
nav.medianav li:hover > .sub-level {
background: #efefef;
color:#000;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 300px;
top: 5px;
}
nav.medianav ul.sub-level li {
border: none;
float:left;
width:300px;
}
Any suggestion for tweaks to get the menu to display even when it is too long or too nested?
You could use css3 columns, see fiddle: http://jsfiddle.net/SLyPL/23, older browsers may vary, see: http://caniuse.com/#search=columns
ul.sub-level{
-webkit-column-count: 2;
-webkit-column-gap: 15px;
-moz-column-count: 2;
-moz-column-gap: 15px;
column-count: 2;
column-gap: 15px;
}
How do I add a rule above and below my nav bar? I tried an HR tag, but that seemed to make a lot of space around the nav bar. Here is my html and here is the example of how I want to do it.
http://matthewtbrown.com/jeffandcricketquilt/
http://matthewtbrown.com/jeffandcricketquilt/rule.png
If you do not want to change your html at all, you can add this to your css
nav ul:before {
border-bottom: 1px solid white;
border-top: 1px solid white;
bottom: 5px;
content: "";
left: 5px;
position: absolute;
right: 5px;
top: 5px;
z-index:0;
}
nav ul {
overflow: auto;
position: relative;
background-color:#000;
}
nav ul li{
position:relative;
z-index:10;
}
and remove the background-color from the li elements (since i added it to the ul)
Use borders and padding:
* {
margin: 0;
padding: 0;
}
nav {
text-align: center;
background: black;
color: white;
padding: .2em;
}
ul {
padding: .5em;
border: 1px solid white;
border-left: none;
border-right: none;
}
nav li {
display: inline;
list-style-type: none;
padding: 0 2em;
}
Demo
I would apply an outline to the ul tag, so the css should be:
nav ul{
outline-color: white;
outline-style: solid;
outline-width: 2px;
outline-offset: -7px;
height: 60px;
width: 848px;
}
Try applying this CSS to the nav bar:
border-top: 1px solid #eee
border-bottom: 1px solid #eee
The easiest is to add a padding to the nav element, 4px makes good with width of li elements. Also add float: left
Now add border-top and border-bottom to the ul element. Add float: left here as well. This will switch your li element around as they have a fixed width. lower the width of them to 210px and things should be fine.
CSS additions to your code:
nav {
padding: 4px
float: left;
}
nav ul {
border-top: 1px solid white;
border-bottom: 1px solid white;
float: left;
}
nav li {
width: 210px;
}
If line-height is the same as font-size you can manipulate border distance by changing padding-bottom of list element, here is my example:
.headerSection ul.navigation li a {
font-size: 12px;
line-height: 12px;
text-decoration: none ;
padding-bottom: 10px;
border-bottom-color: transparent;
border-bottom-width: 5px;
border-bottom-style: solid;
}
.headerSection ul.navigation li a:hover {
border-bottom-color: #e8bf5d;
}
i am designing one drop down list with css
Here is my html code:
i have set each li a property border-right to border-right:1px dashed silver; i want to delete that property for last li a element
and here is css code :
#navigation
{
display:inline-table;
text-align:center;
background:silver;
}
#navigation li
{
float:left;
list-style:none;
padding:2px 10px 2px 10px;
}
#navigation a
{
display:block;
text-decoration:none;
color:green;
font-weight:bold;
padding:5px;
border-right:1px dashed green;
}
.noBorder
{
display:block;
text-decoration:none;
color:red;
font-weight:bold;
padding:5px;
border:0px;
}
#navigation a:hover
{
color:yellow;
background:black;
}
i want to delete right-border of the last list software Developments so i tried with
noBorder class. but can't give any solution please can any one let me know
thanks advance
Am not sure which border are you talking about but try this if you want to remove the border from last li
.noBorder {
border-right: none !important;
}
Try this, it will work
.noBorder
{
border-right:0px!important;
}
you can do this by
border: none !important;
it will remove all border
to remove right border ony try
border-right: none !important;
Good Read
Is !important bad for performance?
#navigation {
display: inline - table;
text - align: center;
background: silver;
}
#navigationli {
float: left;
list - style: none;
padding: 2px 10px 2px 10px;
}
#navigationa {
display: block;
text - decoration: none;
color: green;
font - weight: bold;
padding: 5px;
border - right: 1px dashed green;
}
.noBorder {
display: block;
text - decoration: none;
color: red;
font - weight: bold;
padding: 5px;
border: 0px;
}
#navigationa: hover {
color: yellow;
background: black;
}
I am having some problems with the alignment of the links inside the navbar for the mobile version of my site. When looking at the desktop version, everything is ok. It looks like this:
Code:
.navbar {
margin-top: 30px;
min-height: 50px;
padding: 0;
background-color: red;
background-image: none;
filter: -;
border: none;
-webkit-border-radius: none;
-moz-border-radius: none;
border-radius: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
*zoom: 1;
}
.navbar-inner {
background-color: fuchsia;
background-image: none;
border: none;
border-radius: 0;
box-shadow: none;
}
.navbar li a,
.navbar .nav > li > a:hover {
margin-left: 20px;
background-color: #5593f8;
webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
Now for the mobile version. It looks like this at the moment:
Code:
#media (max-width: 767px) {
body {
padding-right: 0;
padding-left: 0;
}
.navbar {
margin-top: 0px;
}
.navbar .nav > li {
float: none;
text-align: center;
}
.navbar li a,
.navbar .nav > li > a:hover {
margin: 0;
}
.navbar .nav {
width: 100%;
background: red;
}
.navbar-inner {
padding: 0;
margin: 0;
}
}
Do you see that small gap on the left where the fuchsia can be seen? I don't want that. I want the links to be width: 100%, but somehow that's not possible. I spend nearly the whole day to figure out what the problem is, but I can't wrap my head around it. Its not margin, its not padding, but what is it? Please help me.
Ok, I got it!
After the media query posted above, I had this:
#media (max-width: 979px) {
.navbar {
margin-top: 0px;
}
.navbar-inner {
padding-left: 5px;
}
}
The 5px declared in the last rule are gap you see in the post above. Moving the rule from this post above the rule from the first post did solve the problem.
At this Test Link I seek to install header and main site navigation on to the top of a blog script. The drop down menu has wide gaps appearing between each of the page links! This does not render like this on the main site which has the same code! What is required to close the gaps?
The dropnav styling is like this:
/*////////////////STYLING TO DROPDOWN MENU//////////////////////*/
.dropnav li ol {
display: none;
width: 13em; } /*Define width of dropdown button*/
.dropnav li:hover ol {
display: block;
position: absolute;
margin: 0;
padding: 0; }
.dropnav li:hover li {
float: none; }
.dropnav li:hover li a {
background-color: #3b3b44; /*Navigation Active Background*/
border-bottom: 1px solid #ccf;
border-top: 1px solid #ccf;
border-right: 1px solid #ccf;
border-left: 1px solid #ccf;
font-size: 16px;
color: #fff; } /*Text Color*/
.dropnav li li a:hover {
color: #000;
background-color: #8db3ff; /*Navigation Hover Background*/
}
you have li padding bottom and li padding top try to removing them (or remove one of them and decrease padding for one of them) and also you have same class dropnav for the div and also the ol try changing one of them to a different class and remove border-style: solid; this should fix your issue.
On line 169 of site_template.css, you have this rule:
li {
padding-bottom: 2px;
padding-top: 2px;
}
You either need to remove this, or override it using something like:
.dropnav li { padding: 0px; }
Remove the padding on li on line 167 of style_template.css