I am new to css
I am trying to develop a navigation bar for website it works fine when it is in full screen, but when i decrease the size of window few elements came down but the background colour remain intact to first row only.
Here's the code
.navbar {
background-color: rgb(11, 29, 66);
height: 60px;
border-radius: 0px;
}
.navbar ul {
margin: 0px;
padding: 0px;
overflow: auto;
}
.navbar li {
float: left;
list-style: none;
margin: 10px 10px;
border-right: 2px solid gold;
}
.navbar li a {
text-decoration: none;
color: khaki;
padding-right: 0.5cm;
font-family: 'Big Shoulders Stencil Display', cursive;
font-size: 28px;
}
<nav class="navbar">
<ul>
<li>
<img src="favicon-32x32.png" alt="Home">
</li>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
</nav>
It's your height property on the navbar. I removed it, run the snippet below:
.navbar {
background-color: rgb(11, 29, 66);
border-radius: 0px;
}
.navbar ul {
margin: 0px;
padding: 0px;
overflow: auto;
}
.navbar li {
float: left;
list-style: none;
margin: 10px 10px;
border-right: 2px solid gold;
}
.navbar li a {
text-decoration: none;
color: khaki;
padding-right: 0.5cm;
font-family: 'Big Shoulders Stencil Display', cursive;
font-size: 28px;
}
<nav class="navbar">
<ul>
<li>
<img src="favicon-32x32.png" alt="Home">
</li>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
</nav>
You can add the background color to your .navbar ul
like this :
.navbar ul {
margin: 0px;
padding: 0px;
overflow: auto;
background-color: blue;
}
Related
I've been trying to figure out how to make a Navbar with a drop down menu. I feel like I'm super close, but for some reason when I hover over my main list element, it shows the entire contents of the submenus as well.
This is the point I keep getting stuck, I've tried adding in, switching around li, and ul in my CSS, but its just not working.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
font-family: Arial, Helvetica, san-serif;
}
body {
background-color: pink;
}
h1 {
text-align: center;
margin: auto;
padding-top: .4em;
background-color: coral;
height: 2em;
width: 100%;
}
nav {
background: red;
margin: auto;
padding: 10px;
line-height: 1.6em;
width: 100%;
}
nav>ul>li {
position: relative;
text-align: center;
color: yellow;
background-color: purple;
width: 31%;
height: auto;
}
nav>ul>li>ul {
background-color: blue;
list-style: none;
position: absolute;
/*display: none;*/
width: 100%;
}
nav>ul>li:hover ul li {
display: block;
}
nav>ul>li>ul>li>ul {
list-style: none;
background-color: black;
position: absolute;
left: 100%;
top: 0px;
width: 40%;
display: none;
}
nav>ul>li>ul>li:hover ul {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Web Page</title>
<link rel="stylesheet" type="text/css" href="C:\Users\geek\Desktop\positions\styles.css">
</head>
<header>
<H1>My Web Page</H1>
</header>
<body>
<div class="wrapper">
<nav>
<ul>
<li>Music
<ul>
<li>Song 1
<ul>
<li>Thing 1
</li>
<li>Thing 2
</li>
<li>Thing 3
</li>
<li>Thing 4
</li>
<li>Thing 5
</li>
<li>Thing 6
</li>
</ul>
</li>
<li>Song 2</li>
<li>Song 3</li>
<li>Song 4</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
The first drop-down items should be centered with the Navbar element (Music).
Every sub-menu after that should appear top 0px; left 100%, of the list item (Song 1 in this case). You can see the expected results in my CSS.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
font-family: Arial, Helvetica, san-serif;
}
body {
background-color: pink;
}
h1 {
text-align: center;
margin: auto;
padding-top: .4em;
background-color: coral;
height:2em;
width: 100%;
}
nav {
background: red;
margin: auto;
padding:10px;
line-height: 1.6em;
width: 100%;
}
nav > ul >li {
position: relative;
text-align: center;
color: yellow;
background-color: purple;
width: 31%;
height: auto;
}
/* i added only following codes */
nav ul li ul li ul {
display:none;
}
nav ul li ul li:hover ul {
display:block;
}
<!DOCTYPE html>
<html>
<head>
<title>Web Page</title>
<link rel="stylesheet" type="text/css"
href="C:\Users\geek\Desktop\positions\styles.css">
</head>
<header>
<H1>My Web Page</H1>
</header>
<body>
<div class="wrapper">
<nav>
<ul>
<li>Music
<ul>
<li>Song 1
<ul>
<li>Thing
1</li>
<li>Thing
2</li>
<li>Thing
3</li>
<li>Thing
4</li>
<li>Thing
5</li>
<li>Thing
6</li>
</ul>
</li>
<li>Song 2</li>
<li>Song 3</li>
<li>Song 4</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
A very similar example of what you are trying to achieve, in this case is on click but you can get the idea on how to do it on :hover
https://codepen.io/Angel-SG/pen/JwXRZo
I am trying to do a Horizontal Menu with a image besides the proper text and I am not able to do it. I've tried a lot of things and I am not able to solve it.
.topper1 {
width: 100px;
height: 50px;
padding: 10px;
}
.logo {
height: 75px;
width: 235px;
padding-left: 315px;
}
.heading {
float: right;
}
.heading ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0
}
.heading ul a {
display: block;
color: blue;
text-decoration: none;
font-weight: 700;
font-size: 12px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
.heading ul li {
position: relative;
float: left;
margin: 0;
padding: 0
}
.heading ul li.current-menu-item {
background: white;
}
.heading ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: white;
padding: 0
}
.heading ul ul li {
float: none;
width: 200px
}
.heading ul ul a {
line-height: 120%;
padding: 10px 15px
}
.heading ul ul ul {
top: 0;
left: 100%
}
.heading ul li:hover>ul {
display: block
}
<div class="topper1">
<div class="logo">
<a href="#"><img alt="nba.com" src="img/nbacom.png" width="90" height="20">
<div class="heading">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">GLOBAL</li>
<li>TEAMS
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>G LEAGUE</li>
<li>WNBA</li>
<li>NBA STORE</li>
</ul>
</nav>
</div>
</div>
</div>
This is the result I am getting:
How can I put this horizontal with the image?
Float can be a pain in the ass, so I recommend you use flexbox instead.
I also had to change your markup a little bit.
See how it looks:
.topper1 {
height: 50px;
padding: 10px;
display: flex;
align-content: center;
}
.logo {
height: 75px;
width: auto;
}
.heading ul {
list-style: none;
display: flex;
margin: 0;
padding: 0
}
.heading ul a {
display: block;
color: blue;
text-decoration: none;
font-weight: 700;
font-size: 12px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
.heading ul li {
flex: 1;
position: relative;
white-space: nowrap;
margin: 0;
padding: 0
}
.heading ul li.current-menu-item {
background: white;
}
.heading ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: white;
padding: 0
}
.heading ul ul li {
float: none;
width: 200px
}
.heading ul ul a {
line-height: 120%;
padding: 10px 15px
}
.heading ul ul ul {
top: 0;
left: 100%
}
.heading ul li:hover>ul {
display: block
}
<div class="topper1">
<div class="logo">
<a href="#"><img alt="nba.com" src="https://goodlogo.com/images/logos/national_basketball_association_nba_logo_2414.gif" width="90" height="20">
</div>
<div class="heading">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">GLOBAL</li>
<li>TEAMS
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>G LEAGUE</li>
<li>WNBA</li>
<li>NBA STORE</li>
</ul>
</nav>
</div>
</div>
Sorry, my bad, was really tired of trying to figure out the issue. So lemme rephrase the question - "How do i make drop-down menu appear below specific item of my centered horizontal menu". ( I've changed the code a bit)
HTML
<div class="menu">
<ul id="nav">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4🔽
<ul id="dropdown">
<li>sublink1</li>
<li>sublink2</li>
</ul>
</li>
</ul>
</div>
CSS of centered .menu
#nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
height: 30px;
position: relative;
}
#nav li {
display: inline;
}
#nav a {
display: inline-block;
padding: 10px;
margin-top: 40px;
font-family: "oswald", sans-serif;
color: black;
text-decoration: none;
}
#nav a:hover {
background-color: rgba(107, 163, 252, 0.28);
}
just add
ul#dropdown
{
padding: 0px;
}
see jsfiddle here : https://jsfiddle.net/yxLzbkL3/
edit fyi : if the padding is not specified the user-agent styling from your browser will auto indent multiple lists using padding.
I have a drop down menu where I want some of the list items to be in one line.
See demo
You will notice that under Tab One, there are 9 rows. I want there to be three rows with three items in each row. How can this be done in CSS?
HTML:
<div id="wrapper">
<ul id="menu">
<li>Tab One
<ul style="width: 300%;">
<li>Column one</li>
<li>Column one</li>
<li>Column one</li>
<li>Column two</li>
<li>Column two</li>
<li>Column two</li>
<li>Column three</li>
<li>Column three</li>
<li>Column three</li>
</ul>
</li>
<li>Tab Two
<ul style="position: relative; left: -100%; width: 300%">
<li>Tab 2</li>
<li>Tab 2</li>
<li>Tab 2</li>
</ul>
</li>
<li>Tab Three
<ul style="position: relative; left: -200%; width: 300%">
<li>Tab 3</li>
<li>Tab 3</li>
<li>Tab 3</li>
</ul>
</li>
</ul>
</div>
CSS:
body {
font-family: arial;
margin: 0px;
padding-left: 40px;
padding-right: 40px;
}
#wrapper {
text-align: center;
height: auto;
margin: auto;
min-width: 500px;
}
#wrap {
display: inline;
}
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#menu > li {
display: block;
position: relative;
float: left;
width: 33.3%;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 14px;
}
li:hover a {
background: #3b3b3b;
}
li:hover li a:hover {
background-color: black;
opacity: .7;
}
Working example: http://jsfiddle.net/w7a3N/5/
Remove > from #menu > li { and set inner <li> to <li style="width: 33%;">
Not sure if the style="width:33%;" is absolutely necessary since it works in Firefox 20 without it, but just to be safe.
UPDATE
You asked for a version that only does multiple columns under the first tab. Here you go:
http://jsfiddle.net/w7a3N/6/
Gave First tab an id like so <ul id="tab1" and then added this to CSS:
#tab1 li{
display: block;
position: relative;
float: left;
width: 33%;
}
I have a ul with a title in a div and I'm trying to make the ul scroll while keeping the title fixed. I also want to have the title match the width of the ul. I'm able to do one of those at a time, but not both together. Either I get a ul with a title that is 100% of the ul width, or I get a title that stays put when the list scrolls, but it doesn't match the ul width. Can someone point out what I'm doing wrong?
fiddle here: http://jsfiddle.net/9zcRy/2/
The HTML
<div class="talkingPointsHolder">
<div class="genericScriptsHolder">
<span class="listHeader">List One</span>
<ul
class="scrollingList">
<li>item 1.1</li>
<li>item 1.2</li>
<li>item 1.3</li>
<li>item 1.4</li>
<li>item 1.5</li>
<li>item 1.6</li>
<li>item 1.7</li>
<li>item 1.8</li>
<li>item 1.9</li>
<li>item 1.10</li>
<li>item 1.11</li>
<li>item 1.12</li>
</ul>
</div>
<div class="genericScriptsHolder">
<span class="listHeader">List Two</span>
<ul
class="scrollingList">
<li>item 2.1</li>
<li>item 2.2</li>
<li>item 2.3</li>
<li>item 2.4</li>
<li>item 2.5</li>
<li>item 2.6</li>
<li>item 2.7</li>
<li>item 2.8</li>
<li>item 2.9</li>
<li>item 2.10</li>
<li>item 2.11</li>
<li>item 2.12</li>
</ul>
</div>
The CSS
.talkingPointsHolder {
border: 1px solid black;
background: #eeeeee;
height: 200px;
overflow: auto;
}
.genericScriptsHolder {
float: left;
width: 48%;
margin: 0px 2px 0px 2px;
/* uncomment to make the title match the ul width (see listHeader too)*/
/*position: relative;*/
}
.listHeader {
color: #ffffff;
background: #444444;
padding: 10px 0px 10px 0px;
text-transform: uppercase;
font-weight:bold;
font-size:11px;
text-align: left;
text-indent: 1em;
position: absolute;
z-index:10;
/* uncomment to make the title match the ul width (see genericScriptsHolder too)*/
/*width: 100%;*/
}
.scrollingList {
position: relative;
top: 31px;
}
.scrollingList li {
overflow: auto;
height: 20px;
color: #666666;
background-color: #cccccc;
font-weight: lighter;
padding: 10px;
margin: 2px;
list-style-type: none;
}
You need to define the width of an element if you're using position: absolute;
I set the width your .list-header to match the width of your .genericScriptsHolder and then adjusted the padding accordingly.
Here's the fiddle: http://jsfiddle.net/9zcRy/15/
Notice that I removed the horizontal margins that you created for the scrolling list line items and instead edited the styling on the parent .genericScriptsHolder element.
.genericScriptsHolder {
float: left;
width: 48%;
margin: 0px 5px 0px 5px;
/* uncomment to make the title match the ul width (see listHeader too)*/
/*position: relative;*/
}
.listHeader {
color: #ffffff;
background: #444444;
padding: 10px 0px 10px 0px;
text-transform: uppercase;
font-weight:bold;
font-size:11px;
text-align: left;
text-indent: 1em;
position: absolute;
width: 48%;
z-index:10;
.scrollingList li {
overflow: auto;
height: 20px;
color: #666666;
background-color: #cccccc;
font-weight: lighter;
padding: 10px;
margin: 2px 0 0 0;
list-style-type: none;
}
http://jsfiddle.net/9zcRy/9/
.listHeader {
color: #ffffff;
background: #444444;
padding: 10px 0px 10px 0px;
text-transform: uppercase;
font-weight:bold;
font-size:11px;
text-align: left;
text-indent: 1em;
position: absolute;
z-index:10;
width:46%;