I have a navigation bar at top of the page. On the right side of it, I have a navigation item list, which are list items. This ul is inside of a div item.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>David Chu's China Bistro</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-expand-md">
<div id="navbarNav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li>
<a href="menu-categories.html">
<span class="material-icons">
restaurant_menu
</span><br class="d-none d-md-block"> Menu</a>
</li>
<li>
<a href="#">
<span class="material-icons">
info
</span><br class="d-none d-md-block"> About</a>
</li>
<li>
<a href="#">
<span class="material-icons">
emoji_events
</span><br class="d-none d-md-block"> Awards</a>
</li>
<li id="phone" class="d-none d-md-block">
<a href="tel:410-602-5008">
<span>410-602-5008</span></a><div>* We Deliver</div>
</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
Problem is, this div has a large space at the right side, as seen in picture. This causes the telephone number to go up when screen width expands. I want this list item to aligned right, so nothing would change when screen expanded.
I'm using Bootstrap 4. I have looked everything about flex but nothing worked out. By the way, I am trying to create a responsive navigation menu which will collapse according to screen size. That's why I am using this classes.
I want this items as in image 1 in every condition.(Telephone number is below others)
body {
font-size: 16px;
color: #fff;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
/** HEADER **/
#header-nav {
background-color: #f6b319;
/*position: relative;*/
}
#logo-img{
background: url('../images/restaurant-logo_large.png') no-repeat;
width: 150px;
height: 150px;
margin: 10px 15px 10px 0;
}
a.navbar-brand {
padding-top: 25px;
font-family: 'Lora', serif;
color: #557c3e;
font-weight: bold;
font-size: 1.5em;
text-transform: uppercase;
text-shadow: 1px 1px 1px #222;
line-height: .75;
}
.navbar-brand a:focus, .navbar-brand a:hover{
text-decoration: none;
}
p.kosher {
text-transform: uppercase;
margin-top: 10px;
color: #000;
font-size: .7em;
}
p.kosher span{
vertical-align: middle;
}
#nav-list {
margin-top: 10px;
}
#nav-list > li {
margin-right: 15px;
}
#nav-list a {
color: #951C49;
text-align: center;
}
#nav-list a span {
font-size: 1.8em;
}
#phone {
margin-top: 5px;
}
#phone a { /* Phone number */
text-align: right;
padding-bottom: 0;
}
#phone div { /* We Deliver */
color: #557c3e;
text-align: right;
padding-right: 15px;
}
button.navbar-toggler{
clear: both;
margin-top: -70px;
margin-right: 0px;
}
li > a:hover, li > a:focus {
text-decoration: none;
}
#nav-list {
margin-top: 10px;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
max-width: 220px;
}
#nav-list li:last-child {
width:100%;
margin-right:0px;
}
So first of, we have to add a max-width to the #navbarNav:
#navbarNav{
max-width:220px;
}
Then, to the #nav-list, we add this code:
#nav-list {
margin-top: 10px;
display:flex;
justify-content:space-between;
}
Now, you want to align the #navbarNav to the right. There are several ways we can do that. First of is with flexbox. If you want to go with this step, you have to add the following code to the parent of the #navbarNav. Which is the #header-nav:
#header-nav{
display:flex;
justify-content:flex-end;
}
However, this makes sure that everything in your #header-nav, is being aligned to the right. So if you are not adding anything else in the #header-nav, you can easily use this code.
Related
I'm learning CSS3 and I practicing creating a navbar, that I want to do is to expand the width of input text to 50% into a navbar, I try to apply a class:
.main-nav__searchbar{
width: 50%;
margin: 0;
padding: 0;
}
But it no works
*{
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
margin:0px;
}
#product-overview {
background-color: #ff1b68;
width: 100%;
height: 528px;
padding: 10px;
}
.section-title{
color: #2ddf5c;
}
#product-overview h1{
color:white;
font-family: 'Anton', sans-serif;
}
.main-header{
width:100%;
background: #2ddf5c;
padding:8px 16px;
}
.main-header > div{
display: inline-block;
vertical-align: middle;
}
.main-header__brand{
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
.main-nav__searchbar{
width: 50%;
margin: 0;
padding: 0;
}
.main-nav{
display: inline-block;
text-align: right;
width: calc(100% - 300px);
}
.main-nav__items{
margin:0;
padding:0;
list-style: none;
}
.main-nav__item{
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS course</title>
<link rel="shortcut icon" href="favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="main-header">
<div>
<a href="index.html" class="main-header__brand">
uHost
</a></div>
<div><input type="text" placeholder="search" class="main-nav__searchbar"></div><nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item">
Packages
</li>
<li class="main-nav__item">
Customers
</li>
<li class="main-nav__item">
Start Hosting
</li>
</ul>
</nav>
</header>
</body>
</html>
Why it does not work if my parent class has display:inline-block property as all my markups there? Regards
Basically, display: inline-block tries to fit all elements in one line. For that reason, your 50% seems very small. If you set it to 100% of the remaining space it is much bigger.
Nevertheless, I believe it is also a good idea to become familiar with flexbox. You can see I used flexbox to re-arrange your navbar.
Now, your elements are nicely spaced between each other. Each of them takes just enough space (you can still adjust the %). Additionally, you achieve a decent level of responsiveness out of the box with flexbox.
*{
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
margin:0px;
}
#product-overview {
background-color: #ff1b68;
width: 100%;
height: 528px;
padding: 10px;
}
.section-title{
color: #2ddf5c;
}
#product-overview h1{
color:white;
font-family: 'Anton', sans-serif;
}
.main-header{
display: flex;
align-items: center;
justify-content: space-evenly;
width:100%;
background: #2ddf5c;
padding:8px 16px;
}
.main-header > div{
vertical-align: middle;
}
.main-header__brand{
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
.main-nav__searchbar{
width: 100%;
margin: 0;
padding: 0;
}
.main-nav{
width: 50%;
text-align: right;
}
.main-nav__items{
display: flex;
justify-content: space-evenly;
margin:0;
padding:0;
list-style: none;
}
.main-nav__item{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS course</title>
<link rel="shortcut icon" href="favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="main-header">
<div>
<a href="index.html" class="main-header__brand">
uHost
</a></div>
<div><input type="text" placeholder="search" class="main-nav__searchbar"></div><nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item">
Packages
</li>
<li class="main-nav__item">
Customers
</li>
<li class="main-nav__item">
Start Hosting
</li>
</ul>
</nav>
</header>
</body>
</html>
I'm setting up a portfolio page for an assignment. I made some changes to my code, and now my navbar isn't working properly. I can't get my page links to fit in my actual navbar they are sitting below it for some reason.
I've tried messing with the padding and margins, but that's not doing anything. It was working fine at one point but I'm not sure what changed.
HTML:
<nav>
<p>STEVEN KANG</p>
<ul>
<li class="rightLinks"><a data-scroll-target="contact">Contact</a></li>
<li class="rightLinks"><a data-scroll-target="projects">Portfolio</a></li>
<li class="rightLinks"><a data-scroll-target="bio">Bio</a></li>
</ul>
<div class="menu-toggle">
<i class="fa fa-bars"></i>
</div>
</nav>
CSS
nav {
background-color: black;
height:60px;
color: #666666;
position: fixed;
top:0;
left:0;
right:0;
width: 100%;
}
nav p {
font-weight: bold;
margin-top: 25px;
margin-left: 10px;
color: white;
text-align: left;
}
nav a {
color: red;
}
nav ul {
margin-bottom: 5em;
}
.rightLinks {
list-style: none;
float: right;
margin-right: 50px;
margin-left: 15px;
}
Those bio, portfolio, and contact links should be on the right centered inside the navbar mirroring my element saying my name.
I feel like it's a simple fix, I'm just not sure what's wrong right now.
I've taken a look at your code. It looks like you need to to utilise floats and a clearfix in order to achieve this.
Take a look at: https://codepen.io/mrmathewc/pen/OKbXRY
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Steven Kang - Developer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index.css">
<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<nav>
<div class="float-left">
<p>STEVEN KANG</p>
</div>
<ul class="float-right">
<li class="rightLinks"><a data-scroll-target="contact">Contact</a></li>
<li class="rightLinks"><a data-scroll-target="projects">Portfolio</a></li>
<li class="rightLinks"><a data-scroll-target="bio">Bio</a></li>
</ul>
<div class="menu-toggle">
<i class="fa fa-bars"></i>
</div>
<div class="clearfix"></div>
</nav>
</body>
CSS:
* {
box-sizing: border-box;
}
body {
text-align: center;
}
h1 {
font-family: 'Rubik', sans-serif;
font-size: 48px;
}
h2 {
font-family: 'Rubik', sans-serif;
font-size: 30px;
}
h3 {
font-family: 'Karla', sans-serif;
font-size: 20px;
color: #0047b3;
;
}
p {
font-family: 'Karla', sans-serif;
font-size: 16px;
color: black;
font-weight: bold;
}
nav {
background-color: black;
height:60px;
color: #666666;
position: fixed;
top:0;
left:0;
right:0;
width: 100%;
}
nav p {
font-weight: bold;
margin-top: 25px;
margin-left: 10px;
color: white;
text-align: left;
}
nav a {
color: #0047b3;
}
nav ul {
margin-bottom: 5em;
}
.rightLinks {
list-style: none;
float: right;
margin-right: 50px;
margin-left: 15px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clearfix { clear: both; }
I would recommend looking into Flexbox though, floats can give you some headaches.
Here's a basic example: https://codepen.io/mrmathewc/pen/wVoWgV
You'll need to extend the above to your code. This may help you understand Flexbox more: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've been trying to create a pretty basic CSS navbar, comprised of a "navbar" container div, and within that a "logo" div and a "menu" div.
However, I seem to have run into some trouble with getting the "menu" div (which contains an unordered list of links) to nest within the "navbar" container div.
Perhaps I'm missing something very simple, but I've tried doing some Googling and can't seem to find a solution to this issue.
I did see a tutorial that showed how to create a similar type of navbar using only an unordered list, but given that I'm also looking to have a logo and potentially other elements in the navbar, I don't think that's what I'm looking for.
Please see below for the HTML and CSS that I've been working with. Any assistance would be greatly appreciated.
Thanks!
body{
padding: 0px;
margin: 0px;
}
.navbar{
height: 50px;
width: 100%;
background: #b4cef7;
}
.logo{
padding-top: 7px;
padding-left: 10px;
width: 50px;
padding-right: 0px;
margin-right: 0px;
}
.navbar ul{
list-style-type: none;
}
.navbar ul li{
float: left;
height: 100%;
width: 50px;
margin: 10px;
background-color: white;
border: 1px solid black;
}
.navbar ul li a{
text-decoration: none;
color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Simple CSS Navbar</title>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<div class="logo">
<i class="fas fa-coffee fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
You have a set height on the navbar and a block level element, forcing the navbar to a new line.
There's many ways you could have the elements on the same line, such as floating or displaying inline-block.
Here's a simple demo of using inline-block:
body {
padding: 0px;
margin: 0px;
}
.navbar {
height: 50px;
width: 100%;
background: #b4cef7;
}
.navbar>* {
display: inline-block;
vertical-align: top;
}
.logo {
padding-top: 7px;
padding-left: 10px;
width: 50px;
padding-right: 0px;
margin-right: 0px;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.navbar ul li {
float: left;
height: 100%;
width: 50px;
margin: 10px;
background-color: white;
border: 1px solid black;
}
.navbar ul li a {
text-decoration: none;
color: black;
}
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
<div class="navbar">
<div class="logo">
<i class="fas fa-coffee fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
There isn't generally a option you should use, be it inline-block, floating, or flexbox; it really just depends on your preferences and target browsers.
Having trouble making the nav bar responsive. Due to the desired design I used two ul's with an image in between. This causes the breakpoints to happen at a large size because of the li padding. I would like to move the logo to the left and add a dropdown button to display the navbar options, along with removing the topbar at a mobile display width. Any help would be much appreciated, Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scalisi Skincare</title>
<link rel="stylesheet" type="text/css" href="build/css/styles.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<header>
<div class="topbar">
GIVE $10, GET $10
FREE SHIPPING AND FREE RETURNS ON ORDERS OVER $50+
<a class="right" href="#">MY ACCOUNT</a>
</div>
<nav>
<ul class="firstNavSection">
<li>BOB'S CREAM</li>
<li>SCALISI SKINCARE</li>
<li>TINTED</li>
</ul>
<img src="assets/logo.PNG" alt="SCALISI">
<ul class="secondNavSection">
<li>REVIEW</li>
<li>ABOUT</li>
<li>BLOG</li>
<li><i class="fa fa-search fa-2x" aria-hidden="true"></i></li>
<li><i class="fa fa-shopping-bag fa-2x" aria-hidden="true"></i></li>
</ul>
</nav>
</header>
</body>
</html>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
header {
.topbar {
display: flex;
justify-content: space-between;
background: #7C8DC0;
padding: 8px 100px;
a {
text-decoration: none;
color: white;
flex: 1;
font-family: calibri;
font-size: 1em;
}
.right {
text-align: right;
}
}
nav {
border: 1px solid #dae3e5;
.firstNavSection {
display: inline-block;
position: relative;
top: -10px;
li {
display: inline-block;
list-style: none;
padding: 0 60px;
a {
font-family: calibri;
font-size: 1.5em;
text-decoration: none;
color: black;
}
}
}
a {
img {
display: inline-block;
position: relative;
top: 10px;
}
}
.secondNavSection {
display: inline-block;
position: relative;
top: -10px;
li{
display: inline-block;
list-style: none;
padding: 0 60px;
a {
font-family: calibri;
font-size: 1.5em;
text-decoration: none;
color: black;
i {
color: #7C8DC0;
}
}
}
}
}
}
Maybe you should follow the Bootstrap's boilerplate and don't forget to add it's resources.
So I am trying to make a web tutorials page just to help out my skills and I cannot seem to figure out why there is a space between the bottom of my navigation bar and the top of my first header? If anyone could possibly tell me what I wrote that would separate these two that would be amazing!
body{
margin: 0;
padding: 0;
background: #cccccc;
}
.nav ul{
list-style: none;
background-color: #444444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li{
font-family: 'Oswald'. sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888888;
}
.nav a{
text-decoration: none;
color: #ffffff;
display: block;
}
.nav a:hover{
background-color: #005f5f;
transition: .3s background-color;
}
.nav a.active{
background-color: #ffffff;
color: #444444;
cursor: default;
}
#media screen and (min-width: 600px){
.nav li{
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
}
.header{
background-color: blue;
height: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Responsive design -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Tutorials - Making web development easier!</title>
<!-- Custom Css -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li class="home"><a class="active" href="#">HOME</a></li>
<li class="tutorials">HTML</li>
<li class="about">CSS</li>
<li class="contact">CONTACT</li>
</ul>
</div>
<div class="header">
<h1>Welcome to Web Tuts</h1>
</div>
</body>
</html>
It's because the h1 element has a default margin set by the user agent stylesheet of the browser.
<div class="header">
<h1>Welcome to Web Tuts</h1>
</div>
You have to remove this margin.
.header h1 {
margin-top: 0;
}
Obligatory CSS reset link.
body {
margin: 0;
padding: 0;
background: #cccccc;
}
.header h1 {
margin-top: 0;
}
.nav ul {
list-style: none;
background-color: #444444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald'. sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888888;
}
.nav a {
text-decoration: none;
color: #ffffff;
display: block;
}
.nav a:hover {
background-color: #005f5f;
transition: .3s background-color;
}
.nav a.active {
background-color: #ffffff;
color: #444444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
}
.header {
background-color: blue;
height: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Responsive design -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Tutorials - Making web development easier!</title>
<!-- Custom Css -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li class="home"><a class="active" href="#">HOME</a>
</li>
<li class="tutorials">HTML
</li>
<li class="about">CSS
</li>
<li class="contact">CONTACT
</li>
</ul>
</div>
<div class="header">
<h1>Welcome to Web Tuts</h1>
</div>
</body>
</html>
To fix that tiny issue is easy, to use a global reset framework is probably easy too. What I would suggest, you should study the basic default browser stylesheet rules, that will bring you CSS skills to the next level.
You can basically go and read through all the lines:
Mozilla Firefox etc
http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css
Apple Safari etc http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
They are quite similar, I suggest to read Mozilla's first. We don't have to remember all of them, just the most common ones will be enough, such as the heading, paragraph, list and blockquote etc.
css:
h1
{
margin:0;
}
there is auto margin in h1 tag which you need to make it 0
Hope the above solved the issue.
Just wanted to follow up to ask if you're comfortable using the web inspector tools.
Sometimes you can try a million things with no luck, but inspect the area and it jumps right out. Troubleshooting issues like this is so much easier to do in the inspector.
I really like the ones built into Chrome, but everyone has a preference.
This article on TeamTreehouse.com blog is a pretty good intro!