Here's the problem: the navbar looks like it's floating down the page.
Why does the nav-bar look like this? I'm still new to css and I've tried everything but nothing works. I've re-written the code again but the issue wasn't resolved. Here's what the nav should look like.
this tutorial is from this udemy course
https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/#%2F
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-color: #fff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;%);
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/*-------------------------------------------------*/
/*reusable componment*/
/*-------------------------------------------------*/%);
.row {
max-width: 1140px;
margin: 0 auto;
}
/*-----------*/
/*headings*/
/*-----------*/
h1 {
margin: 0;
margin-bottom: 20px;
margin-top: 0;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
/*-----------*/
/*buttons*/
/*-----------*/
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s,border 0.2s ,color 0.2s;
}
.btn-1:link,
.btn-1:visited {
background-color: #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-2:link,
.btn-2:visited {
border: 1px solid #e67e22;
color: #e67e22
}
.btn-1:hover,
.btn-1:active {
background-color: #b05d14;
}
.btn-2:hover,
.btn-2:active {
background-color: #b05d14;
color: #fff;
}
/*-------------------------------------------------*/
/*HEADER*/
/*-------------------------------------------------*/
.hero-text-box{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
header {
background-image: -webkit%);-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(assets/images/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
.logo{
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin-top: 55px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding: 8px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
-webkit-transition: border-bottom 0.3s, color 0.3s;
transition: border-bottom 0.3s, color 0.3s;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #BF55EC;
<!DOCTYPE html>
<html>
<head>
<title>omni food</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="grid.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div class="row">
<img src="assets/images/logo-white.png" alt="omni-food" class="logo">
</div>
<div class="main-nav">
<ul>
<li> Food delivery </li>
<li> How it works </li>
<li> Our cities </li>
<li> Sign up </li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br>hello super healthy meals</h1>
<a class="btn btn-1" href="#">I'm hungry</a>
<a class="btn btn-2" href="#">show me more</a>
</div>
</header>
</body>
</html>
please help me
The is defined so that it takes up the entire row on screen. This forces onto a new row making it appear lower. If you still want the functionality of the row class, it should enclose both the img & UL. You can get rid of that div entirely and apply the class row to the Nav element.
<nav class="row">
<img src="assets/images/logo-white.png" alt="omni-food" class="logo">
<div class="main-nav">
<ul>
<li> Food delivery </li>
<li> How it works </li>
<li> Our cities </li>
<li> Sign up </li>
</ul>
</div>
</nav>
Don't use entire row for only logo . you have used
.row{ max.width: 1180px; }
put this .row class in nav element or
remove row class from div for logo .
<nav class("row")>
Related
Simple problem but can't seem to find a functional solution. There's a finger-width white space at the top of the page that doesn't have anything highlighted under inspect.
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.btn {
position: relative;
overflow: hidden;
top: 45px;
left: 45px;
height: 45px;
width: 45px;
text-align: center;
background: #1b1b1b;
border-radius: 3px;
cursor: pointer;
transition: left 0.4s ease;
}
.btn.click {
left: 260px;
}
.btn span {
color: rgb(3, 3, 3);
font-size: 28px;
line-height: 45px;
}
.btn.click span:before {
content: '\f00d';
}
.sidebar {
position: fixed;
width: 225px;
height: 100%;
left: -225px;
background: #1b1b1b;
transition: left 0.4s ease;
}
.sidebar.show {
left: 0px;
}
.sidebar .text {
color: white;
font-size: 25px;
font-weight: 600;
line-height: 65px;
text-align: center;
background: #1e1e1e;
letter-spacing: 1px;
}
nav ul {
background: #1b1b1b;
height: 100%;
width: 100%;
list-style: none;
}
nav ul li {
line-height: 60px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
nav ul li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
nav ul li a {
position: relative;
color: white;
text-decoration: none;
font-size: 18px;
padding-left: 40px;
font-weight: 500;
display: block;
width: 100%;
border-left: 3px solid transparent;
}
nav ul li.active a {
color: cyan;
background: #1e1e1e;
border-left-color: cyan;
}
nav ul li a:hover {
background: #1e1e1e;
}
nav ul ul {
position: static;
display: none;
}
nav ul .feat-show.show {
display: block;
}
nav ul .serv-show.show1 {
display: block;
}
nav ul ul li {
line-height: 42px;
border-top: none;
}
nav ul ul li a {
font-size: 17px;
color: #e6e6e6;
padding-left: 80px;
}
nav ul li.active ul li a {
color: #e6e6e6;
background: #1b1b1b;
border-left-color: transparent;
}
nav ul ul li a:hover {
color: cyan!important;
background: #1e1e1e!important;
}
nav ul li a span {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
font-size: 22px;
color: black;
transition: transform 0.4s;
}
nav ul li a span.rotate {
transform: translateY(-50%) rotate(-180deg);
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #202020;
z-index: -1;
text-align: center;
}
.content .header {
font-size: 45px;
font-weight: 600;
}
.content p {
font-size: 30px;
font-weight: 500;
}
html {
height: 100%
}
body {
height: 100%
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PeePoo</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<div class="btn">
<span class="fas fa-bars"></span>
</div>
<nav class="sidebar">
<div class="text">
Side Menu
</div>
<ul>
<li class="active">Dashboard</li>
<li>
<a href="#" class="feat-btn">Features
<span class="fas fa-caret-down first"></span>
</a>
<ul class="feat-show">
<li>Pages</li>
<li>Elements</li>
</ul>
</li>
<li>
<a href="#" class="serv-btn">Services
<span class="fas fa-caret-down second"></span>
</a>
<ul class="serv-show">
<li>App Design</li>
<li>Web Design</li>
</ul>
</li>
<li>Portfolio</li>
<li>Overview</li>
<li>Shortcuts</li>
<li>Feedback</li>
</ul>
</nav>
<script>
$('.btn').click(function() {
$(this).toggleClass("click");
$('.sidebar').toggleClass("show");
});
$('.feat-btn').click(function() {
$('nav ul .feat-show').toggleClass("show");
$('nav ul .first').toggleClass("rotate");
});
$('.serv-btn').click(function() {
$('nav ul .serv-show').toggleClass("show1");
$('nav ul .second').toggleClass("rotate");
});
$('nav ul li').click(function() {
$(this).addClass("active").siblings().removeClass("active");
});
</script>
</body>
<body>
<h2 class="text-center my-5">The Website of Truth</h2>
<div class="d-flex justify-content-center role=" columnheader ">The Code of Justinian, Book 1 Part 1</div>
<div class="container ">
<div class="justify-content-center "> 1. The Emperors Gratian, Valentinian, and Theodosius to the People of the City of Constantinople.
We desire that all peoples subject to Our benign Empire shall live under the same religion that the Divine Peter, the Apostle, gave to the Romans, and which the said religion declares was introduced by himself, and which it is well known that the Pontiff Damasus, and Peter, Bishop of Alexandria, a man of apostolic sanctity, embraced; that is to say, in accordance with the rules of apostolic discipline and the evangelical doctrine, we should believe that the Father, Son, and Holy Spirit constitute a single Deity, endowed with equal majesty, and united in the Holy Trinity.
(1) We order all those who follow this law to assume the name of Catholic Christians, and considering others as demented and insane, We order that they shall bear the infamy of heresy; and when the Divine vengeance which they merit has been appeased, they shall afterwards be punished in accordance with Our resentment, which we have acquired from the judgment of Heaven.
Dated at Thessalonica, on the third of the Kalends of March, during the Consulate of Gratian, Consul for the fifth time, and Theodosius.
</div>
</div>
</body>
Tried a bunch of things listed on google under the google search "white space at top of page bootstrap" with no luck. Still very new so simple explanations much appreciated <3
This is because your .btn has a top position of 45px therefore the rest of the content align itself to it as it is your first relatively positioned element.
Try adding top: 0; to your .sidebar so that it aligns with the top of the document independently of your button top position and you'll see this space disappear.
Please note that for this fix to work you'll first have to fix a few issues in your markup as mentioned in various comments (only one body tag and ending double quote missing after <div class="d-flex justify-content-center).
My navigation bar cannot click any item except the last item. I have checked and follow the tutorial from youtube but unfortunately I checked code is same but not working at all please anyone got solution please share to me.
Here's My html
<html>
<title>UIA | Homepage</title>
<link href="Homepage.css" rel="stylesheet" type="text/css">
<header>
<div class="row">
<div class="logo">
<img src = "Logo.png">
</div>
<ul class="main-nav">
<li class = "active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
And here's my CSS.
*{
margin: 0;
padding: 0;
}
header{
background-image:
linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(Homepage.jpg);
height:100vh;
background-position:center;
background-size: cover;
}
.main-nav{
float: right;
list-style: None;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img{
width: 150px;
height: auto;
margin-top:10px;
float: left;
}
.row{
max-width: 1200px;
margin: auto;
}
.title{
position:absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1{
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
So did I miss out something please advice me Thank you.
.title is overlapping the menu.
You can give the menu a higher z-index to ensure it is on top.
Information about z-index
updated code below
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(Homepage.jpg);
height: 100vh;
background-position: center;
background-size: cover;
}
.main-nav {
float: right;
list-style: None;
margin-top: 30px;
/* added */
position: relative;
z-index: 100;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
margin-top: 10px;
float: left;
}
.row {
max-width: 1200px;
margin: auto;
}
.title {
position: absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1 {
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
<header>
<div class="row">
<div class="logo">
<img src="Logo.png">
</div>
<ul class="main-nav">
<li class="active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
It is because you do not use clearfix on your floated element parent(similar issues will occur on all floated stuff if you don't use clearfix).
Add this to your css file:
.clearfix:after {
content: "";
display: table;
clear: both;
}
And add clearfix to parent of floated element, in this case to:
<div class="row clearfix">
I recommend reading these two(will come in handy in the future):
https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/clear-fix/
Just in case, here is a link to jsfiddle with solution to your issue: https://jsfiddle.net/mwgjycv4/1/
I'm having another issue. I can't figure where the issue is. I had added a border around my menu items. Everything was working fine until I added a logo. I believe the issue is with my .Main-Nav li a:hover. in my CSS. I'll post everything and see if you guys can figure it out. I would also like to know if I need to make a different file for every page on my website
* {
margin: 0PX;
padding: 0PX;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://static.pexels.com/photos/371794/pexels-photo-371794.jpeg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 200px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.hello {
position: absolute;
width: 1200px;
margin-left: 0px;
margin-top: 0px;
}
h1 {
color: white;
text-text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 275px;
}
.button {
margin-top: 30px;
margin-left: 440px;
}
.btn {
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
}
.btn-one {
background-color: darkorange;
font-family: "roboto", sans-serif;
}
.btn-two {
font-family: "roboto", sans-serif;
}
.btn-two:hover {
background-color: darkorange;
transition: all 0.5s ease-in;
}
<HTML>
<Head>
<title> Drew's Blog</title>
<link href="style.css" rel="stylesheet" type "text/css" </head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Oh-deer.png">
</div>
<ul class="main-nav">
<li class="active"> HOME </li>
<li> ABOUT </li>
<li> GALLERY </li>
<li> NEWS </li>
<li> CONTACT </li>
<li> LESSONS </li>
</ul>
</div>
<div class="Hello">
<h1> Lets Get Started</h1>
<div class="button">
Get to Know Me
Check out my lessons
</div>
</header>
</body>
</html>
`
In
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "roboto", sans-serif;
font-size: 15px;
}
Add a:
border: 2px solid white;
This will put a border around your menu items that are put in the <li> tag
Look in the active class for the border:
.main-nav li.active a {
border: 2px solid white;
}
That's for the HOME button, because it's class is active (class="active">) and it already had a border
I changed the pixels so I can see the results, but the problem is exactly that: The pixels. If your hover pixels and li pixels are the same, you won't see any change
This should add a border to your menu items and change when you hover over them with the mouse.
Also, the
.main-nav li a:hover
does the exact opposite. When you define a border here and you HOVER OVER A MENU ITEM, a border will APPEAR, so basically try to balance the pixels out.
And I'm trying to figure out what exactly you want. Do you want borders to always be there and when you hover over them you want them to disappear or do you want borders to appear when you hover over them.
I've made a website for a school project and want to improve the design a little more. I think the logo makes the header a little bit to big. So I want to move my navbar from under the header to inside the header, to make it look smaller. That's all. I'll post the code and photos underneath.
This is how it looks now
How I want it to be
/* -----------------------
Layout
------------------------*/
.container {
max-width: 70em;
margin: 0 auto;
}
.header {
font-family: 'Handlee', cursive;
color: #fff;
background: #7eabac;
padding: 0.5em 0em;
}
.header-heading {
margin: 0;
max-width: 300px;
margin-left: 400px;
max-height: 300px;
}
.nav-bar {
background: #e9f1f1;
padding: 0;
}
.content {
overflow: hidden;
padding: 1em 1.25em;
background-color: #fff;
}
.main,
.zijkant {
margin-bottom: 1em;
}
.footer {
color: #fff;
background: #656565;
padding: 1em 1.25em;
}
/* -----------------------
Navbar
------------------------*/
.nav {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Open Sans Condensed', sans-serif;
}
.nav li {
display: inline;
margin: 0;
}
.nav a {
display: block;
padding: .7em 1.25em;
color: #black;
text-decoration: none;
border-bottom: 1px solid gray;
}
.nav a:link {
color: black;
}
.nav a:visited {
color: black;
}
.nav a:focus {
color: black;
background-color: white;
}
.nav a:hover {
color: black;
background-color: #eededb;
}
.nav a:active {
color: white;
background-color: #f4ebe9;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<link rel="stylesheet" href="etc/css/styles.css">
</head>
<script type="text/javascript">
function zoom() {
document.body.style.zoom = "-20%"
}
</script>
<body onload="zoom()">
<div class="header">
<div class="container">
<img src="etc/img/logo-wec.png" class="header-heading"></img>
</div>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li><a class="active" href="index.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Producten
</li>
<li>ROC
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</body>
</html>
Put the image container and navbar in the same container:
<div class="header">
<div class="container">
<img src="etc/img/logo-wec.png" class="header-heading"></img>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li><a class="active" href="index.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Producten
</li>
<li>ROC
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
Give the header position relative and the position the navbar using absolute positioning:
.header {
font-family: 'Handlee', cursive;
color: #fff;
background: #7eabac;
padding: 0.5em 0em;
position: relative;
}
.nav-bar{
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 50px;//adjust to center vertically
width: 300px;//adjust to your liking
}
You have to set a height to nav-bar in order to make sure it is centered vertically
I've finished coding my website for a 1024x768 resolution and now want to add #media queries to my code so that the sidebar disappears when the screen is at a width of 980px and then stays like that all the way down from there. I have tried adding the #media max-width 980 myself but it does not seem to be working at all. I've also tried in various places on the page but again, no luck. It's so frustrating! Code Below (Sorry if it's really long, I'm gonna leave it all in there to avoid any questions regarding code).
HTML:
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
</form>
</div>
<ul>
<li style="background-color: #333">
<a href="1Index.html" class="link">
<span style="color: #ed786a">Home</span>
</a>
</li>
<li>
<a href="2Catgeories.html" class="link">
Categories
</a>
</li>
<li>
<a href="http://example.com" class="link">
Bestsellers
</a>
</li>
<li>
<a href="http://example.com" class="link">
Find Us
</a>
</li>
<li>
<a href="http://example.com" class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
CSS:
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
}
#nav {
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li {
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link {
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
display: block;
}
#nav li a:link{
color: #DADADA;
text-decoration: none;
}
#nav li a:visited{
color: #DADADA;
text-decoration: none;
}
#nav li a:hover{
color: #DADADA;
text-decoration: none;
}
#nav li a:active{
color: #DADADA;
text-decoration: none;
}
#welcometext {
text-align: center;
/*font-style: italic;*/
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar .searchstyle{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#searchbar input {
max-width: 95%;
}
/*-------Media Styles-------*/
#media all and (max-width: 980px){
#sidebar{
float: none;
}
}