I am trying to move the Status/Actions Text over to the left but no matter how much I mess with the CSS nothing works!
What it is supposed to look like
What I have so far
HTML code for that section
CSS for that section
.top {
background: #1b1b1e;
width: 1650px;
margin: auto;
}
li a {
display: inline—block;
padding: 1em;
color: #9c9c9c;
text-decoration: none;
text-align: left;
font-size: 25px;
letter-spacing: 1.1px;
font-weight: bold;
margin-right: 10em;
}
<div class="top">
<ul>
<li>Link</li>
<li>Status</li>
<li>Action</li>
</ul>
</div>
.top {
background: #1b1b1e;
width: 100%;
margin: auto;
float: left;
padding: 10px 0;
}
.top ul {
margin: 0px;
padding: 0px;
}
.top li {
list-style-type: none;
float: left;
width: 230px;
}
li a {
display: inline—block;
padding: 1em;
color: #9c9c9c;
text-decoration: none;
text-align: left;
font-size: 25px;
letter-spacing: 1.1px;
font-weight: bold;
}
.statusText {
float: right !important;
}
.actionText {
float: right !important;
max-width: 149px;
}
<div class="top">
<ul>
<li class="linkText">Link</li>
<li class="actionText">Action</li>
<li class="statusText">Status</li>
</ul>
</div>
Please apply this :
.top {
background: #1b1b1e;
display: flex;
align-items: center;
justify-content: space-between;
}
.link-wrap {
width: 300px;
padding-left: 20px;
}
.top ul {
display: flex;
width: 400px;
justify-content: space-between;
list-style-type: none;
}
.top ul li {
padding-right: 25px;
}
.top ul li a,
.link-wrap a {
display: inline—block;
color: #9c9c9c;
text-decoration: none;
font-size: 25px;
letter-spacing: 1.1px;
font-weight: bold;
}
.link-wrap a {
width: 300px;
}
<div class="top">
<div class="link-wrap">
Link
</div>
<ul>
<li>Status</li>
<li>Action</li>
</ul>
</div>
If any changes please let me know.
you can use flexbox order property:
https://www.w3schools.com/css/css3_flexbox.asp
If you are good to go with flex, a few lines of code will fix your issue.
display: flex;
.top {
background: #1b1b1e;
/* width: 1650px; */
width: 100%;
margin: auto;
}
ul {
display: flex;
}
li {
list-style: none;
}
.statusText {
margin-left: auto;
}
li a {
display: inline—block;
padding: 1em;
color: #9c9c9c;
text-decoration: none;
text-align: left;
font-size: 25px;
letter-spacing: 1.1px;
font-weight: bold;
/* margin-right: 10em; */
}
<div class="top">
<ul>
<li>Link</li>
<li class="statusText">Status</li>
<li>Action</li>
</ul>
</div>
If you are interested to go with display inline-block only, you can use the float property.
display: inline-block;
.top {
background: #1b1b1e;
/* width: 1650px; */
width: 100%;
margin: auto;
}
li {
display: inline-block;;
list-style: none;
}
li a {
display: inline—block;
padding: 1em;
color: #9c9c9c;
text-decoration: none;
text-align: left;
font-size: 25px;
letter-spacing: 1.1px;
font-weight: bold;
/* margin-right: 10em; */
}
.float-right {
float: right;
}
<div class="top">
<ul>
<li>Link</li>
<!-- Reversed Order -->
<li class="float-right">Action</li>
<li class="float-right">Status</li>
</ul>
</div>
.top {
background: #1b1b1e;
width: 1650px;
margin: auto;
}
ul{
display:flex;
flex-direction: row-reverse;
}
li a {
display: inline—block;
padding: 1em;
color: #9c9c9c;
text-decoration: none;
text-align: left;
font-size: 25px;
letter-spacing: 1.1px;
font-weight: bold;
margin-right: 10em;
}
<div class="top">
<ul>
<li>Link</li>
<li>Status</li>
<li>Action</li>
</ul>
</div>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.top {
background: #1b1b1e;
width: 100%;
margin: auto;
}
li {
display: inline-block;
}
li a {
display: inline—block;
/* padding: 1em; */
color: #9c9c9c;
text-decoration: none;
text-align: left;
font-size: 25px;
letter-spacing: 1.1px;
font-weight: bold;
margin-right: 1em;
}
ul li:not(:first-child) {
float: right;
}
</style>
<body>
<div class="top">
<ul>
<li>Link</li>
<li>Status</li>
<li>Action</li>
</ul>
</div>
</body>
</html>
Another way to achieve what you want, But I would suggest just like others to use flex box :)
Related
I am currently trying to make a website. However, the problem that I am getting is that when I minimize the browser, Yes, it is being responsive, but the text is going over the other components on the website and I am unsure how to work around this issue as I am quite stumped at this error.
Image for more clarification:
Web error
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css" />
<link rel="stylesheet" href="jason.css">
</head>
<body>
<nav>
<div class="logo">Revolutionary Fitness</div>
<ul>
<div class="items">
<li>Home</li>
<li>Classes</li>
<li>Products</li>
<li>Login</li>
<li>Feedback</li>
</div>
</ul>
</nav>
<div class="background">
<div class="overlay">
<h3>Classes</h3>
<p>Insert Something Here...</p>
</div>
</div>
<div class="main">
<h1>Classes, coaches and community</h1>
<div class="main text">
<p>At Virgin Active, we do health and fitness differently. We have expertly crafted exercise experiences
that are the perfect blend of intelligent programming and feel-good movement. We've got everything from
Yoga to HIIT, so you can move your body any
way you want.
</p>
</div>
</div>
<section class="no.1" id="no.1">
<div class="section">
<img src="Yoga.jpg" alt="Yoga">
<div class="ClassText">
<h1>Yoga</h1>
<p>
Choose from Classes with dynamism,energy and athleticism, to an authentic and peaceful experience.
<br><br>
Classes include: Align,Flow and Calm SkyPark Yoga
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
</div>
</section>
<footer class="footer">
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-whatsapp"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<ul class="list">
<li>About Us</li>
<li>Contact Us</li>
<li>FAQs</li>
</ul>
<p class="copyright">
<small>©2022 Revolutionary Fitness</small>
</p>
</footer>
</body>
</html>
Css:
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;600&display=swap");
* {
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: #1b1b1b;
}
nav:after {
content: '';
clear: both;
display: table;
}
nav .logo {
float: left;
color: white;
font-size: 27px;
line-height: 70px;
padding-left: 60px;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: right;
margin-right: 40px;
}
nav ul li {
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a {
color: white;
text-decoration: none;
line-height: 70px;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover {
color: cyan;
}
nav ul ul li a:hover {
color: cyan;
box-shadow: none;
}
nav ul ul {
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
.background {
background-color: #212529;
width: 100%;
height: 200px;
position: relative;
/* USE FLEXBOX */
display: flex;
align-items: center;
justify-content: flex-start;
/* ADD SOME PADDING FOR BETTER UI */
padding-inline: 16px; /* LEFT and Right */
}
.overlay {
height: 100%;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
}
.overlay h3 {
margin-bottom: 20px;
color: crimson;
font-size: 20px;
}
.overlay p {
font-size: 35px;
}
.main h1 {
display: flex;
text-align: center;
justify-content: center;
margin-top: 20px;
font-size: 50px;
}
.text {
width: 50%;
height: 50px;
padding-top: 20px;
white-space: initial;
margin: 0 auto;
word-wrap: break-word;
}
body {
margin: 0;
font-family: sans-serif;
}
.section {
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: left;
}
.section img {
height: 250px;
}
.section h1 {
margin-left: 100px;
color: black;
}
.section p {
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.footer {
background-color: #000;
padding: 40px;
clear: both;
}
.footer .social {
text-align: center;
padding-bottom: 25px;
color: #4b4c4d;
}
.footer .social a {
display: inline-block;
height: 40px;
width: 40px;
background: #424242;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer .social a:hover {
color: #24262b;
background-color: #ffffff;
}
.footer ul {
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a {
color: #fff;
text-decoration: none;
}
.footer ul li {
display: inline-block;
padding: 0 15px;
}
.footer .copyright {
margin-top: 15px;
text-align: center;
font-size: 20px;
color: #fff;
}
you can use css media query create responsive web page.
#media only screen and (min-width: 768px) {
.overlay h3 {
font-size: 16px;
}
.overlay p {
font-size: 25px;
}
}
#media only screen and (min-width: 1200px) {
.overlay h3 {
font-size: 22px;
}
.overlay p {
font-size: 40px;
}
}
Another way that is not recommended using viewport width and height
.overlay p {
font-size: 1.5vw;
}
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>
So, my goal is to create a simple navigation bar with centered links/elements. I kinda succeeded... Kinda because when i set the floating option it changes spaces between elements and twitches the text out of position (run the snippet to see the efect).
Wanna have some space between the words, but to stay fixed when floated over or activated/selected.
I tried to make it work with styling only ul and li tags but it didnt work, so i tried placing the li tags into separate divisions. Still no success.
Looked through every possible solution i could think of - adding margins, padding, setting them to auto, looked through similar questions here and around web and i got nothing.
Obviously i'm missing something and i would appreciate your help very much so i can continue working on my website.
Here is the code:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
margin: 0;
position: fixed;
height: 85px;
width: 100%;
text-align: center;
background-color: #002345;
}
.about {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.portfol {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.cont {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.active {
display: block;
padding-left: 15px;
padding-right: 15px;
background-color: #fff;
color: #002345;
}
a:hover {
display: block;
padding-left: 15px;
padding-right: 15px;
background-color: #777;
color: #002345;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PortfolioPage</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<div class="about"> <li>ABOUT ME</li> </div>
<div class="portfol"> <li>PORTFOLIO</li> </div>
<div class="cont"> <li>CONTACT</li> </div>
</ul>
</div>
</header>
</body>
it happens because you have added padding on the :hover state but it is not present in the normale state rule...
a {
padding-left: 15px;
padding-right: 15px;
}
a:hover {
display: block;
/*padding-left: 15px;
padding-right: 15px;*/
background-color: #777;
color: #002345;
}
It is because in your hover class you are adding padding to the a tag, add them by default like the example
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
margin: 0;
position: fixed;
height: 85px;
width: 100%;
text-align: center;
background-color: #002345;
}
.about {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.portfol {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.cont {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.active {
display: block;
padding-left: 15px;
padding-right: 15px;
background-color: #fff;
color: #002345;
}
a{
padding-left: 15px;
padding-right: 15px;
}
a:hover {
display: block;
background-color: #777;
color: #002345;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PortfolioPage</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<div class="about"> <li>ABOUT ME</li> </div>
<div class="portfol"> <li>PORTFOLIO</li> </div>
<div class="cont"> <li>CONTACT</li> </div>
</ul>
</div>
</header>
</body>
just remove
padding-left: 15px;
padding-right: 15px;
from
a: hover
So I try to change li's vertical position but when I do the nav bar height is affected as well. What is the way to actually do that without affecting nav bar's height?
Here's the code:
body {
margin: 0px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
padding-left: 5px;
padding-top: 10px;
background-color: #333;
overflow: hidden;
}
li {
float: left;
height: 30px;
width: 100px;
background-color: grey;
color: white;
margin-right: 4px;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 15px;
}
li a {
text-decoration: none;
color: white;
display: block;
}
ul li:hover {
opacity: 0.8;
}
<ul>
<li>Home</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
What is your goal here? To have the content centered or...?
It may be better to use flexbox here rather than set the padding-left: 850px; on your ul (also on your ul you could've used display: block; margin: 0 auto; to center it.) If you'd like, you can give your ul a defined height and use align-items to specify how it should be aligned vertically.
body {
margin: 0;
}
nav {
background-color: #333;
display: flex;
justify-content: center;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
height: 50px;
align-items: center;
}
li {
height: 30px;
width: 100px;
background-color: grey;
color: white;
margin-right: 4px;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 15px;
}
li a {
text-decoration: none;
color: white;
display: block;
}
ul li:hover {
opacity: 0.8;
}
<body>
<nav>
<ul>
<li>Home</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
</nav>
</body>
You can add position: relative; and a value for bottom or top- in my snippet bottom: 4px;:
This reserves the space originally taken by the element (without position: relative;), but moves the element according to the top/bottom/left/right settings, without affecting other elements.
body {
margin: 0px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
padding-left: 5px;
padding-top: 10px;
background-color: #333;
overflow: hidden;
}
li {
float: left;
height: 30px;
width: 100px;
background-color: grey;
color: white;
margin-right: 4px;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 15px;
position: relative;
bottom: 4px;
}
li a {
text-decoration: none;
color: white;
display: block;
}
ul li:hover {
opacity: 0.8;
}
<ul>
<li>Home</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
Tried to vertically align my nav menu with my logo image but with the code I have the navbar doesn't even seem to be within the container element. Any specific error or is it multiple things?
/* Body styles */
body {
background-color: white;
margin: 0px;
width: 100%;
min-width: 1000px;
max-width: 1400px;
}
/* Header styles */
header {
background-color: white;
min-height: 140px;
height: 160px;
}
header img {
display: inline-block;
clear: left;
margin: 0;
}
/* Navigation list styles */
header .container {
margin: auto;
width: 1140px;
min-height: inherit;
height: inherit;
}
header .container .nav-logo {
min-height: inherit;
height: inherit;
width: 188px;
padding-top: 35px;
}
li {
list-style: none;
}
nav.nav-right {
min-width: 737.667px;
width: 737.667px;
float: right;
}
.nav-right ul {
display: inline-block;
margin-left: 40px;
padding: 0px;
vertical-align: top;
}
.nav-right li {
display: inline;
text-transform: uppercase;
font-family: sans-serif;
}
.nav-right li a {
display: inline-block;
color: black;
text-decoration: none;
padding: 5px 10px;
}
.nav-right li a:hover {
outline: 1px black solid;
margin: 0px;
}
<header>
<div class="container">
<div class="nav-logo">
<img src="site_logo.png" alt="Site Logo" />
</div>
<nav class="nav-right">
<ul>
<li>Menu</li>
<li>Locations</li>
<li>Nutrition</li>
<li><a href=# alt="our
story">Our Story</a></li>
<li>Rewards</li>
</ul>
</nav>
</div>
</header>
You needed to add a display: inline-block to your header .container .nav-logo
/* Body styles */
body {
background-color: white;
margin: 0px;
width: 100%;
min-width: 1000px;
max-width: 1400px;
}
/* Header styles */
header {
background-color: white;
min-height: 140px;
height: 160px;
}
header img {
display: inline-block;
clear: left;
margin: 0;
}
/* Navigation list styles */
header .container {
margin: auto;
width: 1140px;
min-height: inherit;
height: inherit;
}
header .container .nav-logo {
min-height: inherit;
height: inherit;
width: 188px;
padding-top: 35px;
display: inline-block;
}
li {
list-style: none;
}
nav.nav-right {
min-width: 737.667px;
width: 737.667px;
float: right;
}
.nav-right ul {
display: inline-block;
margin-left: 40px;
padding: 0px;
vertical-align: top;
}
.nav-right li {
display: inline;
text-transform: uppercase;
font-family: sans-serif;
}
.nav-right li a {
display: inline-block;
color: black;
text-decoration: none;
padding: 5px 10px;
}
.nav-right li a:hover {
outline: 1px black solid;
margin: 0px;
}
<header>
<div class="container">
<div class="nav-logo">
<img src="site_logo.png" alt="Site Logo" />
</div>
<nav class="nav-right">
<ul>
<li>Menu</li>
<li>Locations</li>
<li>Nutrition</li>
<li>Our Story</li>
<li>Rewards</li>
</ul>
</nav>
</div>
</header>
Just add a new css rule display: inline; for .nav-logo{};
Working codepen: https://codepen.io/Omi236/pen/YQdKZY
Whether or not it's the best practice, you can simply add float: left; to header .container .nav-logo
header .container .nav-logo {
min-height: inherit;
height: inherit;
width: 188px;
padding-top: 35px;
float: left;
}
https://jsfiddle.net/vu8y4uxa/
Or as suggested elsewhere use display: inline-block;
You can try this code :
/* Body styles */
body {
background-color: white;
margin: 0px;
width: 100%;
min-width: 1000px;
max-width: 1400px;
}
/* Header styles */
header {
background-color: white;
min-height: 140px;
height: 160px;
}
header img {
display: inline-block;
clear: left;
margin: 0;
}
/* Navigation list styles */
header .container {
margin: auto;
width: 1140px;
min-height: inherit;
height: inherit;
}
header .container .nav-logo {
min-height: inherit;
height: inherit;
width: 188px;
padding-top: 35px;
display: inline-block;//Add this
}
li {
list-style: none;
}
nav.nav-right {
min-width: 737.667px;
/*width: 737.667px;*///Remove this
/*float: right;*///Remove this
}
.nav-right ul {
display: inline-block;
margin-left: 40px;
padding: 0px;
vertical-align: top;
}
.nav-right li {
display: inline;
text-transform: uppercase;
font-family: sans-serif;
}
.nav-right li a {
display: inline-block;
color: black;
text-decoration: none;
padding: 5px 10px;
}
.nav-right li a:hover {
outline: 1px black solid;
margin: 0px;
}
<header>
<div class="container">
<nav class="nav-right">
<div class="nav-logo"><!--Move this-->
<img src="site_logo.png" alt="Site Logo" />
</div>
<ul>
<li>Menu</li>
<li>Locations</li>
<li>Nutrition</li>
<li><a href=# alt="our
story">Our Story</a></li>
<li>Rewards</li>
</ul>
</nav>
</div>
</header>
An option is to use flexbox, which will also save you some CSS coding. For browser compatibility please check here. The code suggested doesn't give any issues from IE11 onwards.
.container {
display: flex;
align-items: center;
}
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
ul li {
padding: 1em;
text-transform: uppercase;
font-family: sans-serif;
}
ul li a {
text-decoration: none;
color: black;
}
<header>
<div class="container">
<div class="nav-logo">
<img src="http://placehold.it/100&text=LOGO" alt="Site Logo" />
</div>
<nav class="nav-right">
<ul>
<li>Menu</li>
<li>Locations</li>
<li>Nutrition</li>
<li>Our Story</li>
<li>Rewards</li>
</ul>
</nav>
</div>
</header>
It's not hard, you use float: right; for nav-right but you forgot to use float: left; for nav-logo class. This will fix it!
I am not sure but you can try inserting your image source line nav-right class,
as i don't see the css code for nav-logo class, else write the code for nav-logo class
.nav-logo {
display: inline-block;
vertical-align: right;
max-width:100%; // or your desired size
}