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>
Related
I'm having trouble making a dropdown menu. My dropdown menu just won't show upon hover, but if I change my display from none to block in .submenu ul li, the dropdown is in the right place.
Can anyone please help me?
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: 'montserrat';
}
.container {
height: 80px;
width: 100%;
background: #34495e;
display: block;
float: right;
}
h1.logo {
font-size: 35px;
font-weight: bold;
color: white;
padding: 0 40px;
line-height: 80px;
float: left;
width: auto;
/* border: 1px red solid; */
}
.logo span {
color: #3498db;
}
nav ul {
float: right;
margin-right: 40px;
/* border: 1px red solid; */
}
nav li {
display: inline-block;
margin: 0 5px;
line-height: 80px;
text-align: center;
/* border: 1px red solid; */
}
nav a {
color: white;
font-size: 18px;
text-transform: uppercase;
padding: 7px 10px;
border-radius: 3px;
}
a.active,
a:hover {
border: 1px solid white;
transition: .5s ease-in;
}
nav #icon {
color: white;
font-size: 30px;
line-height: 80px;
float: right;
margin-right: 40px;
cursor: pointer;
background: #34495e;
border: none;
}
#media (min-width: 980px) {
h1.logo {
font-size: 32px;
padding-left: 60px;
}
nav ul {
margin-right: 20px;
}
nav a {
font-size: 17px;
}
nav #icon {
display: none;
}
div button {
display: none;
}
}
#media(max-width:980px) {
nav #icon {
display: block;
}
nav ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2f3640;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s ease-in;
}
.submenu ul {
top: 100%;
}
nav li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav a {
font-size: 20px;
text-align: center;
}
a.active,
a:hover {
border: none;
color: #3498db;
}
#btn1:hover {
border: none;
color: #3498db;
}
#btn2:hover {
border: none;
color: #3498db;
}
#btn3:hover {
border: none;
color: #3498db;
}
nav ul.show {
left: 0;
}
}
body {
background-image: url('../images/workout.jpg');
background-size: cover;
height: calc(100vh-80px);
}
div .connect {
background: #2f364e;
display: inline-block;
width: auto;
height: auto;
}
#btn1 {
background: #2f364e;
padding: .5em .7em;
border: none;
font-size: 20px;
color: white;
margin: 0 5px;
}
#btn2 {
background: #2f364e;
padding: .5em .7em;
border: none;
font-size: 20px;
color: white;
margin: 0 5px;
}
#btn3 {
background: #2f364e;
color: white;
padding: .5em .7em;
border: none;
font-size: 20px;
margin: 0 5px;
}
.submenu ul li {
display: none;
background: #34495e;
border-radius: 6px;
padding: 0 2px;
text-align: center;
opacity: 0.9;
transition: .5s ease-in;
}
.submenu ul {
margin: 0;
padding: 0;
}
.submenu li a {
margin: 0;
padding: .5em;
}
.main-nav li :hover .submenu {
display: block;
}
<header>
<nav class="container">
<h1 class="logo">Fitness Fir<span>st</span></h1>
<nav class="navbar">
<div class="main-nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Services
<div class="submenu">
<ul>
<li>Membership</li>
<li>Coaching</li>
</ul>
</div>
</li>
<li>Timetables</li>
<li>Contact</li>
<div class="connect" class="button">
<button id="btn1"><i class="fa fa-facebook"></i></button>
<button id="btn2"><i class="fa fa-instagram"></i></button>
<button id="btn3"><i class="fa fa-twitter"></i></button>
</div>
</ul>
<button id="icon"><i class="fa fa-bars" style="font-size:36px"></i></button>
</div>
</nav>
</nav>
</header>
Issue
In your CSS file, you have only hidden the li elements in your submenu:
.submenu ul li {
display: none;
background: #34495e;
border-radius: 6px;
padding: 0 2px;
text-align: center;
opacity: 0.9;
transition: .5s ease-in;
}
But here, you're trying to display the .submenu class, rather than the lis inside. In addition, the :hover selector is not attached to the li
.main-nav li :hover .submenu {
display: block;
}
Fix
To fix this we can change the above selector to the below, so that it is now un-hiding the submenu's lis, when you hover over the parent li (Services button)
.main-nav li:hover .submenu li {
display: block;
}
Layout of what I'mm trying to achieve
I've done the top half of the nav bar and I'm trying to do the second part where the boxes (represent words), which I have circled in the image. I'm trying to directly make that section below the logo sign centered like the image shows but I am unsure on how to do that.
body {
margin: 0;
font-weight: 800;
}
.container {
width: 80%;
height: 100%;
margin: 0 auto;
display: flex;
/* align-items: center; */
justify-content: center;
}
header {
background: #ffe9e3;
height: 100px;
}
.logo {
text-align: center;
margin: 0;
display: block;
}
.business {
position: absolute;
right: 0;
top: 0;
padding: 10px;
}
.menu {}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
<header>
<div class="container">
<h1 class="logo"><i>LOGO</i></h1>
<nav class=m enu>
<ul>
<li>Hair</li>
<li>Nails</li>
<li>Makeup</li>
<li>Face</li>
</ul>
</nav>
<nav class=b usiness>
<ul>
<li>List Your Business</li>
</ul>
</nav>
<<div class="menu">
<nav>
</nav>
</div>
</div>
</header>
I have done the way you wanted it to look
CSS Part :
* {
padding: 0;
margin: 0;
}
body {
background: #333333;
min-width: 100vw;
min-height: 100vh;
}
.header {
height: 150px;
background: pink;
}
.logo {
padding: 10px;
text-align: center;
}
.nav > ul {
display: flex;
justify-content: space-evenly;
padding: 10px;
margin-top: 20px;
}
.nav > ul > li {
width: 100px;
list-style: none;
border: 2px solid #000;
border-radius: 20px;
}
.nav > ul > li > a {
text-decoration: none;
color: #fff;
font-size: 1.3rem;
padding: 3px 5px;
display: flex;
justify-content: center;
}
check the whole code here: https://codepen.io/the-wrong-guy/pen/GRoyKMa?editors=1100
And you have made a lot of syntax errors like not giving double quotes to the class names
I made a dropdown menu and it works perfect in safari, however when I open it up in chrome i can't see the dropdown when I hover over the link. Why is this? I obviously need it to work in both browsers for compatibility reasons.
* {
box-sizing: border-box;
}
h1 {
font-family: 'Arial';
font-size: 6vw;
}
h3 {
font-family: Arial;
font-size: 1.7vw;
text-align: center;
}
p {
font-family: 'Arial';
font-size: 1.7vw;
}
p1 {
font-family: 'Arial';
font-size: 3vw;
}
.header {
background-color: whitesmoke;
padding: 20px;
text-align: center;
}
body {
margin: 0;
background: whitesmoke;
font-family: 'Arial';
font-weight: 300;
font-size: 100%;
}
.main-nav {
display: flex;
}
.main-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: sticky;
position: -webkit- sticky;
background-color: #DF744A;
top: 0;
width: 100%;
}
.main-nav li {
float: left;
}
.main-nav li a,
.dropdown {
display: block;
padding: 1.2em 2.2em;
text-decoration: none;
color: black;
text-align: center;
font-family: 'Arial';
font-size: 1.2vw;
}
.main-nav li a:hover {
background-color: #FFAE89;
}
li.products {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #DF744A;
min-width: 8vw;
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
}
.products:hover .dropdown-content {
display: block;
}
.mainbody {
display: flex;
flex-wrap: wrap;
}
.updates {
flex: 20%;
background-color: #FEDCD2;
}
.section-1 {
flex: 80%;
background-color: whitesmoke;
display: flex;
}
.footer {
padding: 20px;
text-align: center;
background: #bfd8d2;
}
#media screen and (max-width: 600px) {
.main-body {
flex-direction: column;
}
}
.bands {
flex: 50%;
padding: 1em;
}
<div class="header">
<h1>Elle and Belle Design</h1>
<p1>Bespoke Handmade Headbands and Accessories</p>
</div>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li class="products">
Products
<div class="dropdown-content">
Headbands
Earrings
Other
</div>
</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="mainbody">
<div class="updates">
<h3>Updates</h3>
</div>
<div class="section-1">
<div class="bands">
<img src="oliviaband.jpg" alt="Olivia Band" width="330" height="400">
<img src="goldband.jpg" alt="Gold Band" width="330" height="400">
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
Few points:
.main-nav ul had overflow: hidden which was hiding .dropdown-content which overflows the ul.
li.products was missing position: relative this stops your .dropdown-content position: absolute spanning full browser width.
.dropdown-content I added left: 0 and right: 0 so it uses the width of the position: relative (li.products) parent.
I've updated your code in the below snippet.
* {
box-sizing: border-box;
}
h1 {
font-family: 'Arial';
font-size: 6vw;
}
h3 {
font-family: Arial;
font-size: 1.7vw;
text-align: center;
}
p {
font-family: 'Arial';
font-size: 1.7vw;
}
p1 {
font-family: 'Arial';
font-size: 3vw;
}
.header {
background-color: whitesmoke;
padding: 20px;
text-align: center;
}
body {
margin: 0;
background: whitesmoke;
font-family: 'Arial';
font-weight: 300;
font-size: 100%;
}
.main-nav {
display: flex;
}
/* This had overflow: hidden; */
.main-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
position: sticky;
position: -webkit- sticky;
background-color: #DF744A;
top: 0;
width: 100%;
}
.main-nav li {
float: left;
}
.main-nav li a,
.dropdown {
display: block;
padding: 1.2em 2.2em;
text-decoration: none;
color: black;
text-align: center;
font-family: 'Arial';
font-size: 1.2vw;
}
.main-nav li a:hover {
background-color: #FFAE89;
}
/* Requires position: relative;*/
li.products {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
left: 0;
right: 0;
background-color: #DF744A;
min-width: 8vw;
z-index: 5;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
}
.products:hover .dropdown-content {
display: block;
}
.mainbody {
display: flex;
flex-wrap: wrap;
}
.updates {
flex: 20%;
background-color: #FEDCD2;
}
.section-1 {
flex: 80%;
background-color: whitesmoke;
display: flex;
}
.footer {
padding: 20px;
text-align: center;
background: #bfd8d2;
}
#media screen and (max-width: 600px) {
.main-body {
flex-direction: column;
}
}
.bands {
flex: 50%;
padding: 1em;
}
<div class="header">
<h1>Elle and Belle Design</h1>
<p1>Bespoke Handmade Headbands and Accessories</p>
</div>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li class="products">
Products
<div class="dropdown-content">
Headbands
Earrings
Other
</div>
</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="mainbody">
<div class="updates">
<h3>Updates</h3>
</div>
<div class="section-1">
<div class="bands">
<img src="oliviaband.jpg" alt="Olivia Band" width="330" height="400">
<img src="goldband.jpg" alt="Gold Band" width="330" height="400">
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
first issue is that the main-nav is hiding any content that flows outside of it's borders change to:
.main-nav ul {
overflow: visible;
}
Second is that the menu item you want to snap to needs to have position relative set, this tells any children with position absolute what it's reference container should be
li.products {
position: relative;
}
Lastly set the dropdowns position co-ordinates
.products:hover .dropdown-content {
top: 100%;
left: 0;
position: absolute;
}
.main-nav {
display: flex;
position: fixed;
top: 0;
background-color: rgba(0, 0, 0, 0.35);
z-index: 0.9;
height: 5vw;
width: 100%;
}
.main-nav ul {
list-style-type: none;
margin: 0 0 0 20vw;
padding: 0;
overflow: visible;
top: 0;
width: 100%;
height: 5vw;
}
.main-nav ul li {
display: inline-block;
text-align: center;
margin-left: 2vw;
height: 5vw;
}
.main-nav li {
float: left;
height: 5vw;
}
.logoimg {
height: 5vw;
width: auto;
float: left;
position: fixed;
margin-left: 1vw;
z-index: 1;
}
.main-nav li a, .dropdown {
display: block;
padding: 1.2em 2.2em;
text-decoration: none;
color: whitesmoke;
text-align: center;
font-family: 'tenderness';
font-size: 1.5vw;
height: 5vw;
border-bottom: 0.3vw solid transparent;
}
.main-nav li a:after {
display: block;
content: '';
border-bottom: 0.3vw solid whitesmoke;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
min-width: 6vw;
height: 1.15vw;
}
.main-nav li a:hover:after {
height: 1.15vw;
transform: scaleX(1);
}
li.products {
display: inline-block;
position: relative;
height: 5vw;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(0, 0, 0, 0.35);
min-width: 8vw;
z-index: 1;
left: 0;
right: 0;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
height: 5vw;
}
.products:hover .dropdown-content {
display: block;
}
This is my new code. I have added the bottom border to each li as you can see when the user hovers. However, I am wanting it to align with the bottom of the navigation bar, rather than directly under the text.
I have just put an estimated height in of 1.2vw so it looks just about right, however, it isn't exact and I was just wondering if there was a more precise and not so makeshift way of doing this?
Thanks
Mary
this is my very first question! Is now a couple of days that I am facing a problementer code here with checkbox creating a slide up/down mobile first menu.
The checkbox is working perfectly but what I am unable to do after is letting the menu slide up and done when checkbox is checked.
Any hint or help for the right direction would be greately appreciated!
<!-- === MENUTOGGLE === -->
<input type="checkbox" name="checkbox" id="menuToggle" value="value">
<label for="menuToggle" class="menu-icon">☰</label>
<!-- ==== HEADER ==== -->
<header>
<div id="logo" class="brand">
<h1><img src="images/logo.png" alt="Hello"></h1>
</div>`enter code here`
<nav class="menu">
<ul>
<li>Work</li>
<li>About</li>
<li>Blog </li>
<li>Contact</li>
</ul>
</nav>
</header>
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
body {
background: #eee;
color: #444;
-webkit-font-smoothing: antialiased;
font-family: Arial, sans-serif;
font-weight: 400;
height: auto !important;
height: 100%;
min-height: 100%;
text-rendering: optimizeLegibility;
}
.menu {
width: 100%;
position: absolute;
top: 66px;
}
.menu-icon {
float: right;
color: blueviolet;
cursor: pointer;
padding-top: 25px;
padding-right: 30px;
}
#menuToggle {
display: none;
}
#menuToggle:checked + .menu {
position: absolute;
top: -66px;
}
#logo {
float: none;
text-align: left;
padding-top: 7px;
padding-left: 2em;
}
header {
display: block;
background-color: #FFF;
}
nav {
text-align: center;
}
nav ul {
background-color: rgba(255, 255, 255, 0.15);
float: none;
line-height: 3.5em;
margin: 0;
}
nav ul li {
display: block;
list-style-type: none;
}
nav ul li:hover {
background-color: rgba(171, 193, 242, 0.1);
}
nav ul li a {
text-decoration: none;
color: red;
}
nav ul li a:hover {
color: aqua;
}
/*------------ MEDIUM BIG SCREEN -----------------------*/
#media screen and (min-width:600px) {
#logo {
float: left;
}
.menu {
width: 100%;
height: 70px;
position: inherit;
}
.menu-icon {
display: none;
}
header {
height: 70px;
background-color: #FFF;
margin: auto;
width: 100%;
}
nav ul {
background-color: #FFF;
float: right;
padding: 0.55em 3em 0.55em 1.5em;
height: 70px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
background-color: #FFF;
padding-left: 3em;
}
I have modified few lines of your code. Just check below or https://jsfiddle.net/pr7xf32q/, if this is what you expect.
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
body {
background: #eee;
color: #444;
-webkit-font-smoothing: antialiased;
font-family: Arial, sans-serif;
font-weight: 400;
height: auto !important;
height: 100%;
min-height: 100%;
text-rendering: optimizeLegibility;
}
.menu {
width: 100%;
position: absolute;
top: 66px;
}
.menu-icon {
float: right;
color: blueviolet;
cursor: pointer;
padding-top: 25px;
padding-right: 30px;
}
.menu {
display: none;
}
#menuToggle:checked ~ header .menu {
display: block;
}
#logo {
float: none;
text-align: left;
padding-top: 7px;
padding-left: 2em;
}
header {
display: block;
background-color: #FFF;
}
nav {
text-align: center;
}
nav ul {
background-color: rgba(255, 255, 255, 0.15);
float: none;
line-height: 3.5em;
margin: 0;
}
nav ul li {
display: block;
list-style-type: none;
}
nav ul li:hover {
background-color: rgba(171, 193, 242, 0.1);
}
nav ul li a {
text-decoration: none;
color: red;
}
nav ul li a:hover {
color: aqua;
}
/*------------ MEDIUM BIG SCREEN -----------------------*/
#media screen and (min-width:600px) {
#logo {
float: left;
}
.menu {
width: 100%;
height: 70px;
position: inherit;
display: block;
}
.menu-icon {
display: none;
}
header {
height: 70px;
background-color: #FFF;
margin: auto;
width: 100%;
}
nav ul {
background-color: #FFF;
float: right;
padding: 0.55em 3em 0.55em 1.5em;
height: 70px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
background-color: #FFF;
padding-left: 3em;
}
<input type="checkbox" name="checkbox" id="menuToggle" value="value">
<label for="menuToggle" class="menu-icon">☰</label>
<!-- ==== HEADER ==== -->
<header>
<div id="logo" class="brand">
<h1><img src="images/logo.png" alt="Hello"></h1>
</div>
<nav class="menu">
<ul>
<li>Work</li>
<li>About</li>
<li>Blog </li>
<li>Contact</li>
</ul>
</nav>
</header>
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>