My menu has logo to the left then links beside it, then a dropdown link to the right.. however the dropdown link on the end refuses to float right.
logo ---- link link link link ------------------dropdownlink
#main {
position: fixed;
width: 100%;
padding-top: 0px;
height: 60px;
font-size: 12px;
text-transform: uppercase;
background-color: #000;
z-index: 30;
}
#main a {
text-decoration: none;
}
.logo {
display: block;
margin-top: 10px;
height: 40px;
width: auto;
float: left;
}
.nav {
display: flex;
max-width: 1600px;
}
.right, .left{
display: inline-block;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: auto;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 22px 16px;
text-decoration: none;
float: left;
}
li a:hover {
background-color: #000;
}
.dropbtn {
background-color: #000;
margin-top: 10px;
color: #f0f0ee;
padding-top: 12px;
padding-bottom: 20px;
border: none;
cursor: pointer;
min-width: 100px;
text-transform: uppercase;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f0f0ee;
min-width: 185px;
right: 0px;
}
.dropdown-content a {
color: #000;
padding: 13px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #e8e8e7;
}
.dropdown:hover .dropdown-content {
display: block;
float: left;
}
.dropdown:hover .dropbtn {
background-color: #f0f0ee;
color: #000;
}
<header id="main">
<div class="container-fluid">
<div class="nav">
<img src="images/logo.png" class="logo">
<ul class="left">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
<div class="right">
<div class="dropdown">
<button class="dropbtn">link <span class="caret"></span></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
</header>
Add css class with right: 0 and position:absolute property
.right {
position: absolute;
right: 0;
}
#main {
position: fixed;
width: 100%;
padding-top: 0px;
height: 60px;
font-size: 12px;
text-transform: uppercase;
background-color: #000;
z-index: 30;
}
#main a {
text-decoration: none;
}
.logo {
display: block;
margin-top: 10px;
height: 40px;
width: auto;
float: left;
}
.right {
position: absolute;
right: 0;
}
.nav {
display: flex;
max-width: 1600px;
}
.right, .left{
display: inline-block;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: auto;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 22px 16px;
text-decoration: none;
float: left;
}
li a:hover {
background-color: #000;
}
.dropbtn {
background-color: #000;
margin-top: 10px;
color: #f0f0ee;
padding-top: 12px;
padding-bottom: 20px;
border: none;
cursor: pointer;
min-width: 100px;
text-transform: uppercase;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f0f0ee;
min-width: 185px;
right: 0px;
}
.dropdown-content a {
color: #000;
padding: 13px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #e8e8e7;
}
.dropdown:hover .dropdown-content {
display: block;
float: left;
}
.dropdown:hover .dropbtn {
background-color: #f0f0ee;
color: #000;
}
<header id="main">
<div class="container-fluid">
<div class="nav">
<img src="images/logo.png" class="logo">
<ul class="left">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
<div class="right">
<div class="dropdown">
<button class="dropbtn">link <span class="caret"></span></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
</header>
Related
I have navigation bar. I want to move the text 50px from left. I can do this?
.navigation {
width: 100%;
height:35px;
background-color: #f1b500; /*f2c255*/
margin-top: 4.4em;
}
.navigation a {
float: left;
display: block;
color: white;
text-align: center;
padding: 8px 25px;
text-decoration: none;
font-size: 100%;
}
.navigation .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 100%;
border: none;
outline: none;
color: white;
padding: 8px 25px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1b500;
min-width: 120px;
box-shadow: 0px 8px 16px 9px rbga(0,0,0,0.2)
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 8px 15px;
text-decoration: none;
display: block;
text-align: inherit;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #34b0ff;
color: black;
}
.dropdown-content a:hover {
background-color: #34b0ff;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
The menu text is now all the way to the left. I would like to move it 50 pixels further to the right. Is the code wrong or do you just need to add something? I tried adding margin-left: 50px; but it does not work. I state that I am a beginner on programming.
<div class="navigation" id="Nav">
Home
<div class="dropdown">
<button class="dropbtn">Dropbutton
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link1
Link2
Link3
</div>
</div>
Test
Test
</div>
This is my html code. I forgot to post it
add padding-left:50px to .navigation. and everything will move to the right 50px
.navigation {
width: 100%;
height:35px;
background-color: #f1b500; /*f2c255*/
margin-top: 4.4em;
padding-left:50px;
}
.navigation a {
float: left;
display: block;
color: white;
text-align: center;
padding: 8px 25px;
text-decoration: none;
font-size: 100%;
}
.navigation .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 100%;
border: none;
outline: none;
color: white;
padding: 8px 25px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1b500;
min-width: 120px;
box-shadow: 0px 8px 16px 9px rbga(0,0,0,0.2)
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 8px 15px;
text-decoration: none;
display: block;
text-align: inherit;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #34b0ff;
color: black;
}
.dropdown-content a:hover {
background-color: #34b0ff;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navigation" id="Nav">
Home
<div class="dropdown">
<button class="dropbtn">Dropbutton
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link1
Link2
Link3
</div>
</div>
Test
Test
</div>
yeah change your padding to 8px 25px 0px 50px
Either adding padding-left: 50px; or transform: translateY(50px);
I have a navigation bar which is OK, but just underneath that there is a 1px line that I cannot get rid of, it should be flush with the address underneath. This is the code that I have can anyone suggest anything?
There is also some of the html which was so hard formatting on here anyhow they want me to add more text. So it is the address underneath the naviation
address.space {
width: 100%;
background: #FF9900;
font-family: 'Monserrat', sans-serif;
text-align: center;
display: inline-block;
font-size: 1em;
margin-bottom: 20px;
}
/*menu*/
.nav {
background-color: #3333FF;
width: 100%;
height: 40px;
line-height: 40px;
}
.menu {
font-family: Monserrat, sans-serif;
font-size: 20px;
color: white;
list-style-type: none;
padding: 0;
position: relative;
z-index: 1;
}
.menu a {
text-decoration: none;
color: #fff;
line-height: 40px;
height: 40px;
display: block;
}
.menu ul li {
text-align: center;
display: inline-block;
padding: 0 20px 0 20px;
width: 13.5%;
height: 40px;
}
.menu li:visited,
.menu li:active,
.active,
.menu li:hover {
background: #0000EE;
color: #fff;
}
label {
margin: 0 14px 0 0;
font-size: 20px;
display: none;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
html,
body,
#main,
#firstside,
.firstsidewider,
#second,
.wide {
width: 100%;
font-size: 1em;
}
h1 span {
display: none;
}
label {
cursor: pointer;
display: block;
color: #fff;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu li a {
border-bottom: 1px solid #F4F4F4;
display: block;
background: #3333FF;
margin: -20px;
padding: 0;
}
.active,
.menu li:hover {
color: #fff;
background: 0;
}
#toggle:checked+.menu {
display: block;
}
<header id="banner">
<div class="nav">
<label for="toggle">☰</label><input id="toggle" type="checkbox">
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Contacts
</li>
<li>Members
</li>
<li>Policies
</li>
<li>Links</li>
<li class="active">
Volunteer/li>
</ul>
</div>
</div>
<address class="space">
Meeting Address: YMCA -The Lecture Room 29 Rush Green
Road
4.00pm - 6.00pm</address>
<section id="leftheader">
<h1>Hubb <span>support group</span></h1>
I'm attempting to create a navbar with two dropdown menus and after lots of fiddling with the dropdown menu I've got it sorta working. But it's made the rest of the items out of order.
https://jsfiddle.net/o5pcs1y7/
body {
font-family: Arial;
background-color: #FAFAFA;
}
.container {
width: 960px;
position: relative;
margin-left: auto;
margin-right: auto;
background-color: #FAFAFA;
padding: 10px 10px 10px;
}
.header h1 {
border-bottom: solid 2px #2c3840;
text-transform: uppercase;
color: #2c3840;
}
.header img {
float: right;
position: relative;
width: 90px;
margin-top: -60px;
}
.nav {
background-color: #2c3840;
position: relative;
width: 100%;
float: left;
height: 41px;
margin-top: -22px;
}
.nav a {
font-family: Arial;
float: left;
display: inline-block;
color: #FAFAFA;
text-align: center;
padding: 10px 14px;
text-decoration: none;
font-size: 18px;
}
.nav a:hover {
background-color: #6d4b4f;
}
.projects {
position: relative;
display: inline-block;
}
.projects-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 10px 14px;
z-index: 1;
text-decoration: none;
}
.projects:hover .projects-content {
display: block;
}
.services {
position: relative;
display: inline-block;
}
.services-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
text-decoration: none;
}
.services:hover .services-content {
display: block;
}
<!doctype html>
<title>Werribee Roadworthy Centre</title>
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<body>
<div class="container">
<div class="header">
<h1>Werribee Roadworthy Centre</h1>
<img src="car.png">
</div>
<div class="nav">
Home
<div class="services">
Services
<div class="services-content">
1
2
3
</div>
</div>
<div class="projects">
Projects
<div class="projects-content">
1
2
3
</div>
</div>
Photo Gallery
Contact Us
</div>
<div class="section">
</div>
<div class="aside">
</div>
</div>
</body>
This is the code. The ordering of the navbar is correct in the HTML just not in the finished product. Also don't mind the broken dropdown.
Since the parent .nav could have a child of div or either a, you didn't float the div to left like you float a and that what was making the mess:
you just have to add:
.nav > div {
float: left;
}
body {
font-family: Arial;
background-color: #FAFAFA;
}
.container {
width: 960px;
position: relative;
margin-left: auto;
margin-right: auto;
background-color: #FAFAFA;
padding: 10px 10px 10px;
}
.header h1 {
border-bottom: solid 2px #2c3840;
text-transform: uppercase;
color: #2c3840;
}
.header img {
float: right;
position: relative;
width: 90px;
margin-top: -60px;
}
.nav {
background-color: #2c3840;
position: relative;
width: 100%;
float: left;
height: 41px;
margin-top: -22px;
}
.nav a {
font-family: Arial;
float: left;
display: inline-block;
color: #FAFAFA;
text-align: center;
padding: 10px 14px;
text-decoration: none;
font-size: 18px;
}
.nav > div {
float: left;
}
.nav a:hover {
background-color: #6d4b4f;
}
.projects {
position: relative;
display: inline-block;
}
.projects-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 10px 14px;
z-index: 1;
text-decoration: none;
}
.projects:hover .projects-content {
display: block;
}
.services {
position: relative;
display: inline-block;
}
.services-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
text-decoration: none;
}
.services:hover .services-content {
display: block;
}
<!doctype html>
<title>Werribee Roadworthy Centre</title>
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<body>
<div class="container">
<div class="header">
<h1>Werribee Roadworthy Centre</h1>
<img src="car.png">
</div>
<div class="nav">
Home
<div class="services">
Services
<div class="services-content">
1
2
3
</div>
</div>
<div class="projects">
Projects
<div class="projects-content">
1
2
3
</div>
</div>
Photo Gallery
Contact Us
</div>
<div class="section">
</div>
<div class="aside">
</div>
</div>
</body>
Hope this helps :)
I made a navigation bar with a dropdown and was working fine until i added the "position: fixed;" statement in the css file. Once I did that the dropdown either isn't coming up when the mouse hovers over the designated button or is coming up off screen. Note the parent button reacts to the mouse hover fine in terms of color changes, that's why i think the dropdown is coming up off screen.
EDIT: i realized that the dropdown appears in the ul element and i can scroll within it to view the list. It's not appearing as an actual dropdown over the content on the page but within the navbar itself.
Here's my code:
ul.navbar {
overflow-x: hidden;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #ffb90f;
width: 100%;
display: block;
vertical-align: middle;
height: 48px;
position: fixed;
top: 0;
}
.navbar li {
display: inline-block;
overflow: hidden;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
dropdown:hover .dropbtn {
background-color: #FFC63D;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #FFF3D5;
min-width: 160px;
box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-left: 8.7%;
}
.dropdown-content a {
color: #FFBE1E;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ffb90f;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
<body>
<ul class="navbar">
<li id="navbar" style=" margin-left: 3%; width:22%">Home</li>
<li id="navbar" style=" width: 50%; text-align: center"><img src="logo.png" width="45px" height="45px" style="margin: 0"></li>
<li id="navbar" class="dropdown" style="float: right; margin-right: 3%; width: 21%; text-align: right">
Jump to...
<div class="dropdown-content">
Item1
Item2
</div>
</li>
</ul>
</body>
Update css and remove the overflow to properties ul.navbarfrom your css and add position:relative and remove width:21%; to below html
<li id="navbar" class="dropdown" style="float: right; margin-right: 3%; text-align: right; position:relative;">
css part
.dropdown-content {
display: none;
position: absolute;
background-color: #FFF3D5;
min-width: 160px;
box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-left: 8.7%;
left:0px; /* Add this you can change it as your need */
}
working fiddle
fiddle
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #ffb90f;
width: 100%;
display: block;
vertical-align: middle;
height: auto;
position: fixed;
top: 0;
}
.navbar li {
display: inline-block;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
dropdown:hover .dropbtn {
background-color: #FFC63D;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #FFF3D5;
min-width: 160px;
box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-left: 8.7%;
left:0px;
}
.dropdown-content a {
color: #FFBE1E;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ffb90f;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
<ul class="navbar">
<li id="navbar" style=" margin-left: 3%; width:22%">Home</li>
<li id="navbar" style=" width: 50%; text-align: center"><img src="logo.png" width="45px" height="45px" style="margin: 0"></li>
<li id="navbar" class="dropdown" style="float: right; margin-right: 3%; text-align: right; position:relative;">
Jump to...
<div class="dropdown-content">
Item1
Item2
</div>
</li>
</ul>
Remove overflow from .navbar
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #ffb90f;
width: 100%;
display: block;
vertical-align: middle;
height: 48px;
position: fixed;
top: 0;
}
.navbar li {
display: inline-block;
overflow: hidden;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
dropdown:hover .dropbtn {
background-color: #FFC63D;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #FFF3D5;
min-width: 160px;
box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-left: 8.7%;
}
.dropdown-content a {
color: #FFBE1E;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ffb90f;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
<body>
<ul class="navbar">
<li id="navbar" style=" margin-left: 3%; width:22%">Home</li>
<li id="navbar" style=" width: 50%; text-align: center"><img src="logo.png" width="45px" height="45px" style="margin: 0"></li>
<li id="navbar" class="dropdown" style="float: right; margin-right: 3%; width: 21%; text-align: right">
Jump to...
<div class="dropdown-content">
Item1
Item2
</div>
</li>
</ul>
</body>
I have a nav i made that works just as i want.. my only issue is the button drop down is to display to the right of the first 2 links how ever it displays first and forces the links to display last.
it displays the links after the drop down so instead of
logo --------------------- Home- News- Dropdown
it displays
logo --------------------- Dropdown- Home- News
drop down should be on the end
CODE
#siteHeader {
padding-top: 22px;
height: 90px;
background-color: black;
}
.logo {
display: block;
height: 45px;
width: auto;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: auto;
display: block;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
float: left;
}
li a:hover {
background-color: #000;
}
.dropbtn {
background-color: #000;
color: white;
padding-top: 16px;
padding-bottom: 33px;
font-size: 12px;
text-transform: uppercase;
border: none;
cursor: pointer;
min-width: 100px;
}
.dropdown {
position: relative;
display: inline-block;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #434343;
min-width: 185px;
right: 0;
text-transform: uppercase;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 12px;
}
.dropdown-content a:hover {
background-color: #000000
}
.dropdown:hover .dropdown-content {
display: block;
float: left;
}
.dropdown:hover .dropbtn {
background-color: #434343;
color: white;
}
<div id="siteHeader">
<div class="container-fluid">
<img src="../content/images/official_logo_white.png" class="logo">
<ul>
<li>Home
</li>
<li>News
</li>
</ul>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
just switch them
#siteHeader {
padding-top: 22px;
height: 90px;
background-color: black;
}
.logo {
display: block;
height: 45px;
width: auto;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: auto;
display: block;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
float: left;
}
li a:hover {
background-color: #000;
}
.dropbtn {
background-color: #000;
color: white;
padding-top: 16px;
padding-bottom: 33px;
font-size: 12px;
text-transform: uppercase;
border: none;
cursor: pointer;
min-width: 100px;
}
.dropdown {
position: relative;
display: inline-block;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #434343;
min-width: 185px;
right: 0;
text-transform: uppercase;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 12px;
}
.dropdown-content a:hover {background-color: #000000}
.dropdown:hover .dropdown-content {
display: block;
float: left;
}
.dropdown:hover .dropbtn {
background-color: #434343;
color: white;
}
<div id="siteHeader">
<div class="container-fluid">
<img src="../content/images/official_logo_white.png" class="logo">
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<ul>
<li>Home</li>
<li>News</li>
</ul>
</div>
</div>
If I were you I would remove those floats and simplify by using flexbox
#siteHeader {
padding-top: 22px;
height: 90px;
background-color: black;
}
.container-fluid {
display: flex
}
.nav {
flex: 1;
display: flex;
justify-content: flex-end
}
.logo {
flex: 0 50px
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: auto;
display: block;
}
li {
display: inline-block
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #000;
}
.dropbtn {
background-color: #000;
color: white;
padding-top: 16px;
padding-bottom: 33px;
font-size: 12px;
text-transform: uppercase;
border: none;
cursor: pointer;
min-width: 100px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #434343;
right: 0;
text-transform: uppercase;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 12px;
}
.dropdown-content a:hover {
background-color: #000
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #434343;
color: white;
}
<div id="siteHeader">
<div class="container-fluid">
<img src="../content/images/official_logo_white.png" class="logo">
<div class="nav">
<ul>
<li>Home
</li>
<li>News
</li>
</ul>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
In <ul> I have changed its css property display: block to display: inline-block and for <div class="dropdown"> I have also made it display: inline-block as by default div is block level of element so both can fit in same line and I have wrap both <div> and <ul> to one <div> that will put them on right side by using float: right
see answer in below snippet.
#siteHeader {
padding-top: 22px;
height: 90px;
background-color: black;
}
.logo {
display: block;
height: 45px;
width: auto;
float: left;
}
.nav {
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: auto;
display: inline-block;
float: left;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
float: left;
}
.dropdown {
display: inline-block;
float: left;
}
<div id="siteHeader">
<div class="container-fluid">
<img src="../content/images/official_logo_white.png" class="logo">
<div class="nav">
<ul>
<li>Home</li>
<li>News</li>
</ul>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>