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.
Related
I'm trying to make a Responsive header with HTML and CSS.
But there are two problems which I can't solve.
const toggleBtn = document.querySelector('.navbar__toggleBtn');
const menu = document.querySelector('.navbar__menu');
const icons = document.querySelector('.navbar__icons');
toggleBtn.addEventListener('click', () => {
menu.classList.toggle('active');
icons.classList.toggle('active');
});
body {
margin: 0;
font-family: Source Sans Pro;
}
a {
text-decoration: none;
color: white;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #263343;
padding: 8px 12px;
}
.navbar__logo {
font-size: 24px;
color: white;
}
.navbar__logo i {
color: #d49466;
}
.navbar__menu {
display: flex;
list-style: none;
padding-left: 0;
}
.navbar__menu li {
padding: 8px 12px;
}
.navbar__menu li:hover {
background-color: #d49466;
border-radius: 4px;
}
.navbar__icons {
list-style: none;
color: white;
display: flex;
padding-left: 0;
}
.navbar__icons li {
padding: 8px 12px;
}
.navbar__toggleBtn {
display: none;
position: absolute;
right: 32px;
font-size: 24px;
color: #d49466;
}
#media screen and (max-width: 768px) {
.navbar {
flex-direction: column;
align-items: flex-start;
padding: 8px 24px;
}
.navbar__menu {
display: none;
flex-direction: column;
align-items: center;
width: 100%;
}
.navbar__menu li {
width: 100%;
text-align: center;
}
.navbar__icons {
display: none;
justify-content: center;
width: 100%;
}
.navbar__toggleBtn {
display: block;
}
.navbar__menu.active,
.navbar__icons.active {
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<script src="main.js" defer></script>
<title>Nav Bar</title>
</head>
<body>
<nav class="navbar">
<div class="navbar__logo">
<i class="fa-solid fa-brain-circuit"></i>
Macro
</div>
<ul class="navbar__menu">
<li>Home</li>
<li>Information</li>
<li>Supply</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
<ul class="navbar_icons">
<li><i class="fa-brands fa-instagram"></i></li>
<li><i class="fa-brands fa-facebook"></i></li>
</ul>
<a href="#" class="navbar__toggleBtn">
<i class="fas fa-bars"></i>
</a>
</nav>
</body>
</html>
And these are the problem.
I want to show my social icons but they don't show up.
Social icons don't disappear when the page shrinks.
I tried to add the below code in my style.css.
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
But nothing changed. I have no idea how to fix them. How can I solve it?
You are using fontawesome v6 code with a v5 css.
In v5, the code should look like this:
<i class="fab fa-instagram"></i>
Remember to select v5 when you search for the icons.
I'm trying to build a blog web page in a HTML CSS tutorial and I can't find a way to make the navBar identical.
Here's the Navigation Bar:
I don't know how to separate the logo on the left to the group of icons on the right.
I tried to use Flex but I can't figure out how to use it properly.
header img {
height: 40px;
margin-left: 40px;
}
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
}
body {
background-color: aliceblue;
}
header * {
display: inline;
}
header li {
justify-content: center;
margin: 20px;
}
header li a {
color: black;
text-decoration: none;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<header>
<img src="C:\Users\elios\OneDrive\Documents\HTML_classes\My_blog_project\logo.png" alt="">
<nav>
<ul>
<li><i class="material-icons">search</i></li>
<li><i class="material-icons">list</i></li>
<li><i class="material-icons">notifications</i></li>
<li><button>Upgrade</button></li>
<li>
<a href="">
<div id="circle"></div>
</a>
</li>
</ul>
</nav>
</header>
If you have any advice or suggestions it would be great I'm starting and this is making me struggle a lot.
Thanks in advance guys!
You just have to use display: flex; align-items: center; with header style which will look like
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
}
and also need to add CSS in Nav style, which will look like
header nav{
margin-left: auto;
display: flex;
align-items: center;
}
Complete code
header img{
height: 40px;
margin-left: 40px;
}
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
}
header nav{
margin-left: auto;
display: flex;
align-items: center;
}
body{
background-color: aliceblue;
}
header * {
display: inline;
}
header li{
justify-content: center;
margin: 20px;
}
header li a {
color: black;
text-decoration: none;
<!DOCTYPE html>
<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>My blog</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<header>
<img src="https://assets.hongkiat.com/uploads/psd-text-svg/logo-example.jpg" alt="">
<nav>
<ul>
<li><i class="material-icons">search</i></li>
<li><i class="material-icons">list</i></li>
<li><i class="material-icons">notifications</i></li>
<li><button>Upgrade</button></li>
<li><div id="circle"></div></li>
</ul>
</nav>
</header>
</body>
</html>
You can use display: flex on the header (vertical alignment via align-items as desired), and to move the logo and the navigation to the left and right, just add margin-left: auto to nav to move it as far right as its contents allow.
(margin-right: auto for the logo would accomplish the same result, BTW)
header img {
height: 40px;
margin-left: 40px;
}
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
}
body {
background-color: aliceblue;
}
header * {
display: inline;
}
header li {
justify-content: center;
margin: 20px;
}
header li a {
color: black;
text-decoration: none;
}
nav {
margin-left: auto;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<header>
<img src="C:\Users\elios\OneDrive\Documents\HTML_classes\My_blog_project\logo.png" alt="(logo)">
<nav>
<ul>
<li><i class="material-icons">search</i></li>
<li><i class="material-icons">list</i></li>
<li><i class="material-icons">notifications</i></li>
<li><button>Upgrade</button></li>
<li>
<a href="">
<div id="circle"></div>
</a>
</li>
</ul>
</nav>
</header>
You can do it with Flex, give your main div the display: flex and justify-content: space-between so there will be a space between your logo and other nav-items and then align-items: center so every item will be in the same horizontally aligned.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<header>
<img src="C:\Users\elios\OneDrive\Documents\HTML_classes\My_blog_project\logo.png" alt="(logo)">
<nav>
<ul>
<li><i class="material-icons">search</i></li>
<li><i class="material-icons">list</i></li>
<li><i class="material-icons">notifications</i></li>
<li><button>Upgrade</button></li>
<li>
<a href="">
<div id="circle"></div>
</a>
</li>
</ul>
</nav>
</header>
Css
header img {
height: 40px;
margin-left: 40px;
}
header {
background-color: white;
display: flex;
justify-content: space-between;
align-items: center
}
body {
background-color: aliceblue;
}
header * {
display: inline;
}
header li {
justify-content: center;
margin: 20px;
}
header li a {
color: black;
text-decoration: none;
}
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/
my problem is i am trying to make a specific element disappear once a
certain screen width is hit but no matter what i do it stays.
i also tried to do simple media queries css such as changing background
colour for specific widths but that doesnt work either.
Can someone suggest any solutions please?
Thank you
This is my html code:
enter code here<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="technology blog"/>
<meta name="keywords" content="tech reviews,movie and tv reviews"/>
<title>MNKTech</title>
<link rel="stylesheet" href="main2.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="header-ad"></div>
<div class="wrapper">
<header id="mnheader">
<nav>
<div id="logo"><h1 id="branding">MNKTech</h1></div>
<div class="primary-nav">
<ul>
<li class="menu" id="tech-menu"> Tech</li>
<li class="menu" id=" howto-menu"> How To</li>
</ul>
<a href="javascript:void(0)" class="close"
onclick="closenav()">×</a>
</div>
<span id="open" class="open" onclick="Opennav()">☰</span>
<div class="social">
<ul>
<li class="facebook"><a href="#"><i class="fa fa-facebook"
aria-hidden="true"></i></a></li>
<li class="twitter"><a href="#"><i class="fa fa-twitter" aria-
hidden="true"></i></a></li>
<li class="google"><a href="#"><i class="fa fa-google-plus"
aria-hidden="true"></i></a></li>
<li class="pinterest"><a href="#"><i class="fa fa-pinterest"
aria-hidden="true"></i></a></li>
</ul>
</div>
</nav>
<!footer>
<div>
</div>
</body>
</html>
body{
margin: 0;
text-align:center;
}
h1{
color: white;
}
/* header
================*/
header{
background-color: dimgrey;
position: fixed;
width: 100%;
}
/*#header-ad{
min-height: 7vw;
}*/
header #branding{
float: left;
}
/* nav
=========*/
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
.primary-nav ul {
top: 50px;
text-align: center;
}
nav li{
display: inline-block;
margin: auto;
margin-top: 26px;
float: left;
}
nav a{
color: white;
font-weight: 099;
text-decoration: none;
text-transform: uppercase;
font-family:sans-serif;
padding: 0.75em;
}
.social{
float: right;
margin-right: 50px;
font-size: 20px;
margin: auto;
margin-bottom:auto;
text-align: center;
}
.open{
float: right;
margin: 20px;
font-size: 30px;
color: white;
margin-top: 18px;
left: 50px;
display: block;
cursor: pointer;
}
.social ul{
margin-right: 50px;
}
.social ul li{
margin-top: 27px;
}
.cointainer{
width:95%;
margin: 0 auto;
}
#media screen and (min-width : 0px) and (max-width:650px) {
#open{
display: hide;
}
}
If you want the item to "disappear" and have the space it occupies "disappear" too
#media screen and (min-width: 0px) and (max-width: 650px) {
#open {
display: none;
}
}
If you want it to "dissapear but the space it occupies to be held
#media screen and (min-width: 0px) and (max-width: 650px) {
#open {
visibility: hidden ;
}
}
A better explanation would be that display: none you are "deleting" the element entirely whereas visibility: hidden just makes it "invisible" but it is still occupying that space. For more info see here.
You can use below CSS
#media screen and (max-width:650px) {
#open{
display: hide;
}
}
I am making a little website for my automated green house but I ran in to a kink right away! My "#title-bar" just disappears! If anyone can help me figure this out I will love you long time! :P
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UrbanSector</title>
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.2.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div id="container">
<div id="title-bar">
<i id="title-bar-logo" class="fa fa-leaf fa-2x fa-inverse"></i>
<h3>UrbanSector</h3>
<ul>
<li><i class="fa fa-home fa-inverse"></i>Home</li>
<li><i class="fa fa-gear fa-inverse"></i>Notifications</li>
</ul>
</div>
<nav>
<div id="nav-btn-area">
</div>
<ul>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
</ul>
</nav>
</div>
</body>
</html>
* {
/* border: limegreen 1px solid; */
padding: 0px;
margin: 0px;
}
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif
}
#container {
width: 100%;
background-color: #E2E2E2;
display: block;
}
#title-bar {
padding: 2px;
background-color: #363636;
display: inline;
}
#title-bar h3 {
float: left;
margin-left: 5px;
color: #FFFFFF;
}
#title-bar ul {
display: inline;
float: right;
list-style-type: none;
}
#title-bar ul li{
margin-left: 5px;
float: left;
}
#title-bar ul li i{
}
#title-bar-logo {
clear: left;
float: left;
margin: auto;
color: green;
}
nav {
margin-top: 10px;
display: block;
background-color: #363636;
width: 14%;
}
Edited: To fix layout of post
1) Remove the display: inline; rule from the #title-bar class and
2) Give it a height.. say 30px;
#title-bar {
padding: 2px;
background-color: #363636;
height: 30px;
}
FIDDLE
Change display: inline to overflow: hidden on your '#title-bar` CSS rule.
#title-bar {
padding: 2px;
background-color: #363636;
overflow: hidden;
}
This will clear the floats inside the container and cause it to get the height of its contents.
Another way is to make display:inline; -> display:inline-block;