I want to put an html code in my wordpress widget, to show something in top of my page, here's the code, but the last float which is the Phone numbers that i wanna put in the left of the button that are already in the right, its just not working well and it will stay right beside the buttons, i appreciate if you can help me out what is wrong and why.
thank you.
section ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
section li {
float: right;
border-right: 5px solid;
border-color: white;
}
section li:last-child {
border-right: none;
}
section li p {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
section .button {
display: inline-block;
border-radius: 10px;
background-color: #955251;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 16px;
width: 120px;
height: 45px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
align-items: center;
}
section .button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
section .button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
section .ultopnav a:link:active,
a:visited:active {
color: white;
text-decoration: none;
cursor: auto;
}
section .ultopnav a:link {
text-decoration: none;
color: white;
}
section .ultopnav a:visited {
text-decoration: none;
color: white;
}
.ultopnav .floatleft {
color: black;
font-size: 14px;
}
<section>
<ul class="ultopnav">
<li><button class="button" style="vertical-align:middle"><span>خانه </span></button></li>
<li><button class="button" style="vertical-align:middle"><span>صفحه اول فروشگاه </span>
</button></li>
<li>
<p class="floatleft" style="float: left;">تلفن: 77863967 - 021 | فکس: 77267261 - 021</p>
</li>
</ul>
You are trying to float the <p> left within the <li> when you should actually float the <li> left, like so:
section ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
section li {
float: right;
border-right:5px solid;
border-color: white;
}
section li:last-child {
border-right: none;
}
section li p {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
section .button {
display: inline-block;
border-radius: 10px;
background-color: #955251;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 16px;
width: 120px;
height: 45px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
align-items: center;
}
section .button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
section .button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
section .ultopnav a:link:active, a:visited:active {
color: white;
text-decoration: none;
cursor: auto;
}
section .ultopnav a:link {
text-decoration: none;
color: white;
}
section .ultopnav a:visited {
text-decoration: none;
color: white;
}
.ultopnav .floatleft {
color: black;
font-size: 14px;
}
<body>
<section>
<ul class="ultopnav">
<li>
<button class="button" style="vertical-align:middle; align: right">
<span>خانه </span>
</button>
</li>
<li>
<button class="button" style="vertical-align:middle">
<span>صفحه اول فروشگاه </span>
</button>
</li>
<li style="float: left;">
<p class="floatleft">تلفن: 77863967 - 021 | فکس: 77267261 - 021</p>
</li>
</ul>
</section>
</body>
issue is that you use float:left for <p tag.instead you need to use it for <li> tag.
please try this code..
section ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
section li {
float: right;
border-right:5px solid;
border-color: white;
}
section li:last-child {
border-right: none;
}
section li p {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
section .button {
display: inline-block;
border-radius: 10px;
background-color: #955251;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 16px;
width: 120px;
height: 45px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
align-items: center;
}
section .button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
section .button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
section .ultopnav a:link:active, a:visited:active {
color: white;
text-decoration: none;
cursor: auto;
}
section .ultopnav a:link {
text-decoration: none;
color: white;
}
section .ultopnav a:visited {
text-decoration: none;
color: white;
}
.ultopnav .floatleft {
color: black;
font-size: 14px;
}
<section><ul class="ultopnav">
<li><button class="button" style="vertical-align:middle"><span>خانه </span></button></li>
<li><button class="button" style="vertical-align:middle"><span>صفحه اول فروشگاه </span>
</button></li>
<li style="float: left;"><p class="floatleft">تلفن: 77863967 - 021 | فکس: 77267261 - 021</p></li>
</ul>
</section>
Try this:
section li:last-child {
border-right: none;
float: left;
}
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;
}
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 to make a list of buttons to make a link to pages in a document. I cannot make the button inside the anchor to expand to its full content
Even if i put
.linkbutton {
display: block;
min-width: 100%;
}
the size of the button it's still limited to the text inside it. What am I doing wrong?
.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination>li {
display: inline;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination > li > a {
color: #95b047;
}
.pagination>li>a, .pagination>li>span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
.linkbutton {
background: none;
color: #95b047;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
}
</style>
<ul class="pagination">
<li><a>
<input type="submit" class="linkbutton" name="page" value="1"></a></li>
<li class="active"><a>2</a></li>
</ul>
Try this-
.pagination {
display: block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination>li {
width: 34px;
height: 36px;
display: inline-block;
}
.pagination>li>a, .pagination>li>span {
position: relative;
float: left;
padding: 0;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.linkbutton {
background: none;
color: #95b047;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
display: block;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
background-color: #0095ff;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>Active and Hoverable Pagination</h2>
<p>Move the mouse over the numbers.</p>
<div class="pagination">
«
1
<a class="active" href="#">2</a>
3
4
5
6
»
</div>
</body>
</html>
How do i fix the navigation bar, so that the drop-down doesn't go over its parent and it's in line with it?
Also, how do i make the "About" tab to be filled when you hover over it? As you can see it only fills some of it, not until the end of the navigation bar.
There is my fiddle: https://jsfiddle.net/Shade1337/29sd0g07/
.navigation {
overflow: hidden;
height: 60px;
border: 3px solid #E3E3E3;
background-color: #1f1d1d;
font-family: Arial, Helvetica, sans-serif;
width: 1078px;
}
.navigation a {
float: left;
font-size: 30px;
color: antiquewhite;
text-align: center;
padding: 18px 20px;
text-decoration: none;
width: 234px;
height: 25px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
border-style: none;
border-color: inherit;
font-size: 30px;
margin: 0;
outline: none;
color: antiquewhite;
padding: 18px 20px;
background-color: inherit;
font-family: inherit;
width: 214px;
height: 25px;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #4e3f3f;
}
.dropdown-content {
overflow: hidden;
display: none;
position: absolute;
background-color: #1f1d1d;
min-width: 214px;
box-shadow: 0px 8px 16px 0px rgb(186,179,179);
z-index: 1;
}
.dropdown-content a {
float: none;
color: antiquewhite;
padding: 18px 20px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: #4e3f3f;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navigation">
Home
<div class="dropdown">
<button class="dropbtn">Types
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Regular
Cafe latte
Espresso
Cappuccino
</div>
</div>
Shop
About
</div>
Not sure if this is what you want. But here is the solution for what you asked. See the snippet answer.
.navigation {
overflow: hidden;
height: 60px;
border: 3px solid #E3E3E3;
background-color: #1f1d1d;
font-family: Arial, Helvetica, sans-serif;
width: 1078px;
}
.navigation a {
float: left;
font-size: 30px;
color: antiquewhite;
text-align: center;
padding: 18px 20px;
text-decoration: none;
width: 234px;
height: 25px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
border-style: none;
border-color: inherit;
font-size: 30px;
margin: 0;
outline: none;
color: antiquewhite;
padding: 18px 20px;
background-color: inherit;
font-family: inherit;width:100%;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #4e3f3f;
}
.dropdown-content {
overflow: hidden;
display: none;
top:71px;
position: absolute;
background-color: #1f1d1d;
box-shadow: 0px 8px 16px 0px rgb(186,179,179);
z-index: 1;
}
.dropdown-content a {
float: none;
color: antiquewhite;
padding: 18px 20px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: #4e3f3f;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navigation">
<div style="width:25%;float:left">
Home
</div>
<div class="dropdown" style="width:25%;float:left">
<button class="dropbtn">Types
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Regular
Cafe latte
Espresso
Cappuccino
</div>
</div>
<div style="width:25%;float:left">
Shop
</div>
<div style="width:25%;float:left">
About
</div>
Solution:-
You will add bootstrap css file in your project and use bootstrap classes as per the your requirement
For more Info visit the link:-
https://getbootstrap.com/docs/3.3/getting-started/
The solution for the first problem would be to add height: 100% instead of height: 25px; to .dropbtn class.
And the solution for the second problem would be to change the width of .navigation a and .dropdown and to change padding in .navigation a to padding: 18px 0;
Thus something as follows:
.navigation {
overflow: hidden;
height: 60px;
border: 3px solid #E3E3E3;
background-color: #1f1d1d;
font-family: Arial, Helvetica, sans-serif;
width: 1078px;
}
.navigation a {
float: left;
font-size: 30px;
color: antiquewhite;
text-align: center;
padding: 18px 0;
text-decoration: none;
width: calc(1078px / 4);
height: 25px;
}
.dropdown {
float: left;
overflow: hidden;
width: calc(1078px / 4);
}
.dropdown .dropbtn {
border-style: none;
border-color: inherit;
box-sizing: border-box;
font-size: 30px;
margin: 0;
outline: none;
color: antiquewhite;
padding: 14px 20px;
background-color: inherit;
font-family: inherit;
width: 214px;
height: 100%;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #4e3f3f;
}
.dropdown-content {
overflow: hidden;
display: none;
position: absolute;
background-color: #1f1d1d;
min-width: 214px;
box-shadow: 0px 8px 16px 0px rgb(186,179,179);
z-index: 1;
}
.dropdown-content a {
float: none;
color: antiquewhite;
padding: 18px 20px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: #4e3f3f;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navigation">
Home
<div class="dropdown">
<button class="dropbtn">Types
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Regular
Cafe latte
Espresso
Cappuccino
</div>
</div>
Shop
About
</div>
Here is the fiddle.
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>