https://codepen.io/jamesbcn/pen/weYdPw
I'm attempting to copy and paste a navigation bar, that I'm working on into CodePen but the CSS is not being displayed properly.
.navbar-brand {
padding: 0px;
height: 90px;
}
.navbar-brand>img {
height: 100%;
padding: 5px 15px 5px 5px;
width: auto;
margin: center;
}
.nav >li >a {
margin-top: 0;
}
.nav ul{
display: flex;
background-color: #C2A76F;
list-style-type: none;
padding: 0;
}
.nav ul a{
text-decoration: none;
text-align: center;
color: #FFF;
display: block;
padding: 5px;
border: 2px solid white;
}
.nav ul a:hover{
background-color: #816F4A;
}
.nav li{
flex: 1 1 0;
}
p{
padding-top: 10px;
font-size: 20px;
}
You have a couple of problems there, one being the structure in your HTML doesnt look like it matches what you're expecting in your CSS, and the other being that you're treating nav as a css class, rather than an element (Prefixing a css term with a period means the browser is trying to match an element with a css class like <div class='nav'></div>, rather than the HTML element <nav>).
E.g.
.nav >li >a {
margin-top: 0;
}
should be
nav >li >a {
margin-top: 0;
}
Related
I have designed a navigation bar for my website using the following CSS:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
}
li {
float: left;
border-right: 1px solid #ffb366;
}
li a {
display: block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
li a:hover {
background-color: #e67300;
}
</style>
This is a version of the horizontal navigation bar example documented at w3schools.com: http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black
My problem is that it affects other <li> and <ul> elements used in my website as well, not just the navbar. How do I ensure the navbar ones stay separate from other <li> and <ul> elements, using solely CSS? I've started learning CSS quite recently, so I'm certain I'm missing something pretty fundamental here.
Use may want to use css classes
http://www.w3schools.com/cssref/sel_class.asp
ul.mylist {
.....
}
ul.mylist li {
.....
}
ul.mylist li a {
.....
}
ul.mylist li a:hover {
.....
}
Also make sure to add the class to the html
<ul class='mylist'>
<li>......
Similar to man's answer, enclose the ul elements in a div and set the class of the div to navbar, for example. Then change your CSS code to this:
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
}
ul.navbar li {
float: left;
border-right: 1px solid #ffb366;
}
ul.navbar li a {
display: block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
I'll modify your code to demonstrate how you can use classes to specify which ul tag you wish to style
<style>
ul.myNav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
}
ul.myNav > li {
float: left;
border-right: 1px solid #ffb366;
}
ul.myNav > li a {
display: block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
ul.myNav > li a:hover {
background-color: #e67300;
}
</style>
And all you have to do is add the class to your preferred ul element in your html.
<ul class="myNav"> .... </ul>
li:not(:first-child){
code...
}
li:not(:last-child){
code...
I'm curious why my 'homepage' link keeps shifting over. I've made a fiddle of the problem:
jsfiddle.net/nbf8fwdv/
Thanks for the help. I'm still getting the hang of semantics and proper usage in CSS, so if you see any glaring problems with my code that only a beginner would make, please let me know. Thanks for the help in advance.
In order to prevent the homepage from shifting on hover, you'll want to remove this property:
max-width: 75px;
from this class:
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
max-width: 75px;
text-align:center;
}
Because the homepage list item is naturally greater than 75px, the max-width property is actually reducing it's width on hover.
You can write a class like bootstrap
body {
background-color: white;
font-family: PT Sans, sans-serif;
text-shadow: 1px 1px rgba(166,166,166,.2);
}
header {
background: white;
width: 100%
padding: 40px 0;
color: black;
text-align: center;
}
a {
text-decoration: none;
color: black;
font-size: 1.0em;
letter-spacing: 2px;
}
nav {
box-shadow: 1px 1px 10px rgba(166,166,166,.2);
}
nav ul {
background-color: rgba(253,235,193,.3);
overflow: visible;
color: white;
padding: 0;
text-align: center;
margin: 0;
position: relative;
}
nav ul li {
display: inline-block;
padding: 20px 40px;
position: relative;
}
nav ul ul {
display: none;
}
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
text-align:center;
}
nav ul li:hover ul{
display: block;
margin-top: 20px;
}
nav ul li:hover li{
margin-left: -40px;
margin-top:-15px;
text-align: center;
float: left;
clear: left;
}
.portfolio_menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}
To actually save your other links by shifting over when hover over the "portfolio", here is my 2 cents. http://jsfiddle.net/nbf8fwdv/5/
nav ul ul {
display: none;
position:absolute;
left:0;
}
I have a navigation dropdown element that I would like to make selectable - currently the link only works when the text is hovered and not the box surrounding it. Is there a way in which I can do this in CSS.
My CSS code:
.main-menu {
position: absolute;
top:90px;
right:0px;
text-align: right;
z-index: 2000;
}
.main-menu ul {
width: 50%;
background-color: #333;
display: inline;
margin: 0;
padding: 20px 5px;
list-style: none;
color: #fff;
}
.main-menu ul li {
display: inline-block;
margin-right: -10px;
position: relative;
padding: 17px 15px;
cursor: pointer;
color: #fff;
font-size: 14px;
font-weight: 700;
}
.main-menu ul li a {
color: #fff;
border: none;
}
.main-menu ul li a:hover {
color: #f1c40f;
}
/* sub menu */
.main-menu ul li ul {
position: absolute;
top: 25px;
left: 0;
min-width: 150px;
opacity: 0;
margin: 10px 0px;
padding: 17px 5px 0px 5px;
visibility: hidden;
text-align: left;
}
.main-menu ul li ul li {
display: block;
color: #fff;
margin: 0px -5px;
}
.main-menu ul li ul li:hover {
background: #666;
color: #f1c40f;
}
.main-menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Jsfiddle is: http://jsfiddle.net/9BdTK/
Method 1
You can simply move the <a></a> outside of <li>.
E.G:
<li>Home</li>
DEMO HERE
Note: I have only done this for the first two links.
Method 2
A better way to do this is the following:
HTML:
<div id="con">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
CSS:
#con {
width: 100%;
background: #eee;
text-align: center;
}
ul {
list-style: none;
}
li {
display: inline-block;
width: 80px;
height: 50px;
outline: 1px solid #000;
}
a {
display: block;
height: 100%;
width: 100%;
}
Keep <a> inside and set it to display: block;, then set the width and height to 100% and this will take up the whole div creating a div link.
Demo of div link - DEMO HERE
Demo with hover - DEMO HERE
Hope this helps.
I have this on my site, but I also managed to do so from this site.
have a look :
Don't put padding in the 'li' item. Instead set the anchor tag to
display:inline-block; and apply padding to it.By Stussa
As said on : Make whole area clickable
Goodluck
I have an header with 100% width, and a nav inside header with 980px
Now i want to give the position as fixed for both header and nav.
I have tried with the following code but could'nt get what i wanted to
Please help me,
my header.css
width:100%;
height:60px;
background: #ffffff;
position:fixed;
z-index:999;`
and my nav.css
background: #ffffff;
height: 60px;
text-align:center;
position:fixed;
z-index:99;
.nav ul
margin:0;
padding:0;
.nav li
display: inline-block;
list-style-type: none;
vertical-align:middle;`
.nav li a
font-size: 16px;
color: black;
display: block;
line-height: 60px;
padding: 0 10px;
text-decoration: none;
If the nav is inside the header you don't need position:fixed in your nav.css, you should also remove the z-index. A clearer description of the problem and the html you're using would be helpful if that doesn't help.
#Fastnto, it's something like this that you want?
http://jsfiddle.net/alexandrecanijo/NBp8F/
I've changed some parts of your original CSS in order to show the header (#ccccccc) and nav (#000000) and added the .content with enough lorem ipsum so that you are able to see the nav.
But, the CSS might be cleaned and refactored in some parts... Didn't had a change to do this...
Hope this helps.
html,body, p {
margin: 0;
padding: 0;
border: 0;
font: 14px arial;
}
.header {
width: 100%;
height: 80px;
background: #cccccc;
position: fixed;
z-index:999;
margin: 0;
clear: both;
top: 0;
}
.nav {
background: #000000;
height: 60px;
text-align:center;
z-index:99;
}
.nav ul {
margin:0;
padding:0;
}
.nav li {
float: left;
list-style-type: none;
}
.nav li a {
font-size: 16px;
color: #fe6700;
display: block;
line-height: 60px;
padding: 0 10px;
text-decoration: none;
}
.nav li a:hover {
color: #000000;
background: #fe6700;
}
.content {
margin-top: 80px;
}
So basically I need to produce a menu like this in Wordpress:
Where the red bar is the width of the page and not fixed so can shrink with resize.
And the submenu is centred
I currently have:
And the CSS is:
#access {
clear: both;
display: block;
margin: 0 auto -10px;
width: 100%;
text-align:center;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
margin-top: 0.3em;
padding-left: 0;
display:inline-block;
/*Font*/
letter-spacing:1px;
text-transform:uppercase;
color: #FFF;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #eee;
display: block;
line-height: 2.333em;
margin: 0 1.2125em;
margin-bottom: 0.5em;
padding-top: 0.5em;
text-decoration: none;
/* Same colour as background */
border-bottom: 1px solid #000;
}
#access ul ul {
display: none;
position: inherit;
top: 0; left: 0;
margin: 0 auto;
width: 100%;
z-index: 9999;
float: left;
}
#access ul ul a {
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
display: inline-block;
}
#access ul ul li {
display: inline-block;
}
Any help
Check this jsfiddle created for you
I had defined a new division sub-menu-bg after the menu code and given a red background to it. Also i had edited your CSS to achieve correct horizontal drop-down menu.
Hope this will solve your problem.