My problem is that in mobile view which is 320px wide, everything looks okay, but when I start manually scaling up, the nav won't stay in center. It just stays on the left side of the screen, when the right side gets bigger. Title (h1) scales up normally. Navigation "buttons" should remain with the same width till break which is 768px wide.
body {
background-color: #FAFAFA;
font-family: helvetica;
margin: 0;
padding: 0;
}
.title {
text-align: center;
font-size: 1.5em;
margin-top: 30px;
margin-bottom: 30px;
color: #626262;
}
/*** NAVIGATION ***/
.main-nav li {
list-style: none;
}
.main-nav a {
text-decoration: none;
background-color: white;
font-weight: 600;
color: #626262;
padding-top: 15px;
padding-bottom: 15px;
font-size: .75em;
display: flex;
display: inline-block;
width: 280px;
margin-top: 5px;
text-align: center;
margin-left: -20px;
}
.profile-icon {
height: 125px;
width: 200px;
}
/****** PORTFOLIO ********/
.main-content {
background-color: #FFFFFF;
}
<header class="main-header">
<div class="container">
<h1 class="title">Title1</h1>
<ul class="main-nav">
<li>HOME
</li>
<li>PORTFOLIO
</li>
<li>CONTACT
</li>
</ul>
<img src="images/responsive-layout-profile.png" class="profile-icon">
<p>Text field</p>
</div>
</header>
<div class="main-content">
<h2 class="title-two">PORTFOLIO</h2>
</div>
see here : jsfiddle
you were using both display:flex and display:inline-block on li a . just use one display .
i suggest you don't use fixed width on the buttons, but instead use float:left with percentage
also you say that you want the buttons to remain the same width till 768px, but you set a width of width: 280px * 3 = 840px. so ofcourse the three buttons don't fit on 768px device width.
added also a media Q for below 768px
check also snippet
body {
background-color: #FAFAFA;
font-family: helvetica;
margin: 0;
padding: 0;
}
ul.main-nav {
padding:0;
}
.title {
text-align: center;
font-size: 1.5em;
margin-top: 30px;
margin-bottom: 30px;
color: #626262;
}
/*** NAVIGATION ***/
.main-nav li {
list-style: none;
float:left;
width: 32.66%;
margin-right:1%;
}
ul li:last-child { margin-right:0;}
.main-nav a {
text-decoration: none;
background-color: white;
font-weight: 600;
color: #626262;
padding-top: 15px;
padding-bottom: 15px;
font-size: .75em;
display:block;
margin-top: 5px;
text-align: center;
}
.profile-icon {
height: 125px;
width: 200px;
}
/****** PORTFOLIO ********/
.main-content {
background-color: #FFFFFF;
}
#media only screen and (max-width: 768px) {
.main-nav li { width:100%}
}
}
<header class="main-header">
<div class="container">
<h1 class="title">Title1</h1>
<ul class="main-nav">
<li>HOME</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
<img src="images/responsive-layout-profile.png" class="profile-icon">
<p>Text field</p>
</div>
</header>
<div class="main-content">
<h2 class="title-two">PORTFOLIO</h2>
</div>
see here : jsfiddle
you were using both display:flex and display:inline-block on li a . just use one display .
i suggest you don't use fixed width on the buttons, but instead use float:left with percentage
also you say that you want the buttons to remain the same width till 768px, but you set a width of width: 280px * 3 = 840px. so ofcourse the three buttons don't fit on 768px device width.
added also a media Q for below 768px
check also snippet
body {
background-color: #FAFAFA;
font-family: helvetica;
margin: 0;
padding: 0;
}
ul.main-nav {
padding:0;
}
.title {
text-align: center;
font-size: 1.5em;
margin-top: 30px;
margin-bottom: 30px;
color: #626262;
}
/*** NAVIGATION ***/
.main-nav li {
list-style: none;
float:left;
width: 32.66%;
margin-right:1%;
}
ul li:last-child { margin-right:0;}
.main-nav a {
text-decoration: none;
background-color: white;
font-weight: 600;
color: #626262;
padding-top: 15px;
padding-bottom: 15px;
font-size: .75em;
display:block;
margin-top: 5px;
text-align: center;
}
.profile-icon {
height: 125px;
width: 200px;
}
/****** PORTFOLIO ********/
.main-content {
background-color: #FFFFFF;
}
#media only screen and (max-width: 768px) {
.main-nav li { width:100%;margin:0}
}
}
<header class="main-header">
<div class="container">
<h1 class="title">Title1</h1>
<ul class="main-nav">
<li>HOME</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
<img src="images/responsive-layout-profile.png" class="profile-icon">
<p>Text field</p>
</div>
</header>
<div class="main-content">
<h2 class="title-two">PORTFOLIO</h2>
</div>
Related
I need something like this, i tried alot but failed lol, im newenter image description here
flex space between
.row {
display: flex;
justify-content: space-between;
}
<div class="row">
<div class="left">logo</div>
<div class="center">menu menu menu menu</div>
<div class="right">anonymous</div>
</div>
You'll need some HTML and some CSS.
I don't have the time to make you the header just like in that screenshot you postet but maybe heres a start.
Put this in the body of your HTML page:
<div class="header">
CompanyLogo
<div class="header-right">
<a class="active" href="#home">Home</a>
Contact
About
</div>
</div>
<div style="padding-left:20px">
<h1>Responsive Header</h1>
<p>Resize the browser window to see the effect.</p>
<p>Some content..</p>
</div>
At the beginning of your document make a block or use an external stylesheet.
If you use an external stylesheet remember to link it in your HTML document.
In your style block put the following:
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
You'll end up with a fairly responsive header.
Now just link in your logo.
This is an example from w3Schools.
Check out this snippet.
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
CompanyLogo
<div class="header-right">
<a class="active" href="#home">Home</a>
Contact
About
</div>
</div>
<div style="padding-left:20px">
<h1>Responsive Header</h1>
<p>Resize the browser window to see the effect.</p>
<p>Some content..</p>
</div>
</body>
</html>
I am having a hard time on how to re-arrange my HTML/CSS code in order to move a few links inside of a hamburger nav menu.
I would like to have 'home' always visible but then, I would like the other linked pages to fall inside the hamburger menu, only visible when clicking the menu...
I would like the following to be inside the hamburger menu:
About
Contact
Portfolio ,etc.
Any suggestions on how to achieve this?
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100px;
display: table-cell;
}
.header-logo img {
height:100px;
padding: 10px 0px 10px 10px;
float: left;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
padding-top: 30px;
}
header nav ul li {
display: inline-block;
padding: 0 5px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.sub {
display: none;
background-color: rgb(70, 149, 223);
margin-left: 5%;
height: auto;
}
/* HAMBURGER MENU */
.nav div {
height: 4px;
background-color: rgb(20, 15, 15);
margin: 5px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30;
display: block;
float: right;
margin: 1em 0 0 1em;
padding-right: 10px;
}
.one {
width: 30px;
}
.two {
width: 20px;
}
.three {
width: 25px;
}
.nav:hover div{
width: 30px;
}
ul li a:hover {
color: rgb(255, 255, 255);
}
<header>
<div class="header-logo">
<img src="img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul> <li>Home</li></ul>
<ul>
<a href="#" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
<div class="sub">
<li>Subscribe</li>
</div>
</a>
</ul>
</nav>
</header>
What you are looking for is called toggle. For this you need to use javascript or jquery (a simplified javascript "version"). To easy explain this, put for example a parent div for the child elements you want to toggle. Then in your css display this parent div none. Then you use jquery to be able to tell what you want to be clickable and then later what you want to toggle.
//Script.js
$(document).ready(function(){ //Use ready to make a function available after the document is loaded
$(".nav").click(function(){
$("#hamburger").toggle(250);
});
});
/* Style.css */
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100px;
display: table-cell;
}
.header-logo img {
height:100px;
padding: 10px 0px 10px 10px;
float: left;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
padding-top: 30px;
}
header nav ul li {
display: inline-block;
padding: 0 5px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.sub {
display: none;
background-color: rgb(70, 149, 223);
margin-left: 5%;
height: auto;
}
/* HAMBURGER MENU */
.nav div {
height: 4px;
background-color: rgb(20, 15, 15);
margin: 5px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30;
display: block;
float: right;
margin: 1em 0 0 1em;
padding-right: 10px;
}
.one {
width: 30px;
}
.two {
width: 20px;
}
.three {
width: 25px;
}
.nav:hover div{
width: 30px;
}
#hamburger{
display:none;
}
ul li a:hover {
color: rgb(255, 255, 255);
}
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type = "text/javascript" src = "script.js">
</head>
<header>
<div class="header-logo">
<img src="https://milestonehackers.com/img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul> <li>Home</li></ul>
<ul>
<a href="#" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div id = "hamburger">
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
</div>
<div class="sub">
<li>Subscribe</li>
</div>
</a>
</ul>
</nav>
</header>
Edit: I added the src to the new script.js file which should contain your click function:)
Don't think you could achieve what you want only using CSS, maybe with a lot of CSS "hacks". I'd suggest adding some javascript to show on click.
I'd recommend checking this page https://www.w3schools.com/howto/howto_js_mobile_navbar.asp since they have an example just like the one you trying to achieve.
Hello everyone I make some navbar just for practice, and what I want is to set the logo straight to the left but I does not know how to do that. Also navbar should be responsive.
Here is the code:
body {
font-family: Helvetica;
padding: 0;
margin: 0;
background-color: #f4f4f4;
font-size: 10px;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* Header **/
header {
background: #28292b;
color: #ffffff;
min-height: 50px;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
margin-top: 5px;
}
header #branding h1 {
display: inline-block;
vertical-align: middle;
}
header nav {
display: flex;
justify-content: center;
margin-top: 20px;
}
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="branding">
<h1>LOGO</h1>
</div>
<nav>
<ul>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
<li>FIVE</li>
</ul>
</nav>
</div>
</header>
When I resize to mobile phone width hamburger icon will appear and logo should be no more floated on the left. It should be on center.
I hope someone can help me. Thanks :)
So I'm working on a navigation bar for my website and I'm trying to space everything centred evenly in the bar, but for some reason, I can't get things to work out evenly. Either margins don't work, or they do but not all the way, and it's getting quite frustrating. Here's my code:
body {
margin: 0 px;
font - family: Helvetica;
}
.navbar {
background - color: grey;
width: 100 % ;
height: 70 px;
text - align: center;
}
.items li {
display: inline - block;
padding - left: 50 px;
}
.items a {
text - decoration: none;
color: #333;
font-weight: bold;
font-size: 20px;
padding-top: -25px;
}
<body>
<div class="navbar">
<div class="items">
<img src="logo1.png" style="height:55px;padding-top:7.5px;">
<li>Apparel</li>
<li>Equipment & Accessories</li>
<li>Contact Us</li>
</div>
</div>
</body>
To center vertically links with the logo, use vertical-align:middle;.
Also, If you set margin or padding don't set it to <a> because it's an item with inline properties but set it on li items which are inline-block.
In addition to that, it's strange to write li items without ul container.
body {
margin: 0px;
font-family: Helvetica;
}
.navbar {
background-color: grey;
width: 100% ;
height: 70px;
text-align: center;
}
.items img
{
vertical-align:middle;
}
.items li {
display: inline-block;
vertical-align:middle;
padding-left: 50px;
}
.items a {
text-decoration: none;
color: #333;
font-weight: bold;
font-size: 20px;
}
<body>
<div class="navbar">
<div class="items">
<img src="logo1.png" style="height:55px;padding-top:7.5px;">
<li>Apparel</li>
<li>Equipment & Accessories</li>
<li>Contact Us</li>
</div>
</div>
</body>
Note:See it in full page!
body {
margin: 0px;
font-family: Helvetica;
}
.navbar {
background-color: grey;
width: 100%;
height: 70px;
text-align: center;
position: relative;
}
.items {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.items li {
display: inline-block;
padding-left: 50px;
}
.items a {
text-decoration: none;
color: #333;
font-weight: bold;
font-size: 20px;
display: block;
}
<div class="navbar">
<div class="items">
<img src="logo1.png" style="height:55px;padding-top:7.5px;">
<li>Apparel</li>
<li>Equipment & Accessories</li>
<li>Contact Us</li>
</div>
</div>
This question already has answers here:
How do nested vertical margin collapses work?
(3 answers)
Closed 6 years ago.
I'm trying to style the central big part called "jumpotron" which contains "letters" and "h1". When I try to push "letters" or "h1" lower in the central area vertically it moves the whole "jumpotron" together with the background image. Why does that happen? Why it doesn't respect the fact that "letters" is a child of "jumpotron" so it has to move it's margins inside of "jumpotron"? Also is there a better way to create a big image background for the "jumpotron" from the one I used?
Here's the code:
<body>
<header>
<div class="container">
<h2>Trunk Club</h2>
<nav>
<ul>
<li>How it Works</li>
<li>What to Expect</li>
<li>Stylists</li>
<li>Log In</li>
<li><a id="getstarted" href="#">Get Started</a></li>
</ul>
</nav>
</div>
</header>
<div id="jumpotron">
<div id="letters">
<h1>Premium Clothing,<br>
Great Advice,<br>
Zero Work</h1>
</div>
</div>
</body>
</html>
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Source Sans Pro', sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
width: 100%;
min-width: 800px;
height: 60px;
background-color: #151e28;
text-transform: uppercase;
}
header h2 {
color: #FFFFFF;
float: left;
margin-top: 15px;
}
nav {
float: right;
margin-top: 5px
}
nav li {
float: left;
list-style: none;
color: #878b85;
margin-left: 20px;
font-size: 12px;
font-weight: bold;
}
nav ul li:nth-child(4) {
border-left: 1px solid #878b85;
padding-left: 15px;
padding-top: 5px;
padding-bottom: 5px;
margin-top: -5px;
}
nav ul li:nth-child(5) {
border: 1px solid #878b85;
padding-right: 20px;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 7px;
margin-top: -5px;
}
#getstarted {
text-decoration: none;
color: #878b85;
}
#getstarted:visited {
color: #878b85;
}
#jumpotron {
width: 100%;
min-height: 670px;
background-image: url(images/Stylist_Product_Exp30-v3.jpg);
background-position: center;
background-size: 100% auto;
}
#letters {
margin-top: 500px;
}
#jumpotron h1 {
color: #FFFFFF;
text-align: center;
font-size: 55px;
}
You have to set the padding on #letters to 500, not the margin