I want my navigation to be under my 'Acme Web Design' header whenever I view it on a mobile device. All my elements are positioned in the correct place for a laptop screen but when I check if it is responsive, they don't position at the place where I want them to be.
Here is what my header looks like in a responsive view.
This is the HTML and CSS file i used.
.headerdiv {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
/* Header */
header{
background-color: #35424a;
border-bottom: 2px solid #ff6600;
color: white;
padding-top: 30px;
min-height: 70px;
}
nav {
float: right;
margin-bottom: 30px ;
}
nav a {
color: white;
text-decoration: none;
padding: 10px;
}
<header>
<div class="container">
<div class="headerdiv">
<h1>Acme Web Design</h1>
<nav>
HOME
ABOUT
SERVICES
</nav>
</div>
</div>
</header>
This is what I want my header to look like
I guess this is what you were trying to achieve. Here is the working Codepen Link
body {
font-family: sans-serif;
}
.headerdiv {
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
}
.headerdiv h1 {
margin-bottom: 20px;
font-size: 32px;
font-weight: bold;
}
.headerdiv h1 span {
color: #e7491c;
}
/* Header */
header {
background-color: #35424a;
border-bottom: 2px solid #ff6600;
color: white;
padding-top: 30px;
min-height: 70px;
}
nav {
margin-bottom: 30px;
}
nav a {
color: white;
text-decoration: none;
padding: 10px;
font-size: 20px;
font-weight: bold;
}
nav a.active {
color: #e7491c;
}
<header>
<div class="container">
<div class="headerdiv">
<h1><span>Acme</span> Web Design</h1>
<nav>
HOME
ABOUT
SERVICES
</nav>
</div>
</div>
</header>
Change your flex settings for the container as follows (especially flex-direction: column;), use text-align: center for the child elements of .headerdiv to center them and delete the floats to include all elements in the parent element/background
Oh, and put those extra rules in a media query to leave your desktop view untouched - the snippet below only shows the mobile view, no media queries (since you didn't have any in your code)
headerdiv {
display: flex;
flex-direction: column;
}
.headerdiv>* {
text-align: center;
}
/* Header */
header {
background-color: #35424a;
border-bottom: 2px solid #ff6600;
color: white;
padding-top: 30px;
min-height: 70px;
}
nav {
margin-bottom: 30px;
}
nav a {
color: white;
text-decoration: none;
padding: 10px;
}
<body>
<header>
<div class="container">
<div class="headerdiv">
<h1>Acme Web Design</h1>
<nav>
HOME
ABOUT
SERVICES
</nav>
</div>
</div>
</header>
Change your css property of class .headerdiv and remove nav class.
.headerdiv {
text-align: center;
margin-bottom: 30px;
}
/* Header */
header {
background-color: #35424a;
border-bottom: 2px solid #ff6600;
color: white;
padding-top: 30px;
min-height: 70px;
}
nav a {
color: white;
text-decoration: none;
padding: 10px;
}
try this.. you will get same result in any device.
if you want to increase the size of the menu u can do that using font-size..
headerdiv {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
/* Header */
header{
background-color: #35424a;
border-bottom: 2px solid #ff6600;
color: white;
padding-top: 8px;
min-height: 70px;
}
nav {
/* float: right; */
text-align: center;
margin-bottom: 30px ;
}
nav a {
color: white;
text-decoration: none;
padding: 10px;
}
<header>
<div class="container">
<div class="headerdiv">
<div>
<h1 style="text-align: center;">Acme Web Design</h1>
</div>
<div>
<nav>
HOME
ABOUT
SERVICES
</nav>
</div>
</div>
</div>
</header>
Related
There is a navigation menu that I developed in <header>. However, the <p> element I use after the <header> element and the <header> components overlap. Why does this issue occur and how do I fix this issue?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: cabin, sans-serif;
}
header {
display: block;
}
.primary {
color: blue;
font-weight: bold;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 70px;
position: fixed;
top:0px;
padding: 0 30px;
background: transparent;
}
.navbar ul {
display: flex;
}
.navbar li {
list-style: none;
}
.navbar a {
text-decoration: none;
margin: 0 5px;
padding: 10px 20px;
font-weight: bolder;
}
.navbar a:hover{
border-bottom: 2px blue solid;
}
.navbar a:visited{
color: blue;
}
<body>
<!-- Navigation Menu -->
<header>
<div class="navbar">
<h1 class="logo"><span class="primary">benj</span>.codes</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</header>
<!-- Content -->
<p>test</p>
</body>
This issue occurs in the .navbar class style position: fixed; caused by its use. In this case, the navigation menu remains fixed when the scrollbar is opened. So you can enclose other elements after the <header> element in a <div> element; apply a margin-top style to this element and you will see all other content scroll.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: cabin, sans-serif;
}
header {
display: block;
}
.primary {
color: blue;
font-weight: bold;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 70px;
/* This style applied causes the <p> element to render above. */
position: fixed;
top:0px;
padding: 0 30px;
background: yellow;
}
.navbar ul {
display: flex;
}
.navbar li {
list-style: none;
}
.navbar a {
text-decoration: none;
margin: 0 5px;
padding: 10px 20px;
font-weight: bolder;
}
.navbar a:hover{
border-bottom: 2px blue solid;
}
.navbar a:visited{
color: blue;
}
/* The following style has been applied to the <div> element that encloses other elements. */
.container {
margin-top: 70px; /* To avoid shifting caused by the "position: fixed" class style */
height: 1500px; /* To make the scrollbar pop up */
}
p {
height: 200px;
border: 1px solid red;
background-color: lightgray;
}
<body>
<header>
<div class="navbar">
<h1 class="logo"><span class="primary">benj</span>.codes</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</header>
<div class="container">
<p>Content</p>
</div>
</body>
Im trying to align my a-tags side by side, but for some reason the divs inside the a-tag goes to the next line?
How can I align my three menu lines side by side with the others? display: inline-block; didn't work for me?
What I'm trying to create is something like this image:
But what do I miss to get the menu on the same line?
.logo-style {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 32px;
line-height: 39px;
/* identical to box height */
letter-spacing: 0.05em;
color: #4C5BA0;
}
/*
Navigation bar three lines menu
/*
Navigation
*/
.topnav {
overflow: hidden;
background: none !important;
align-items: center;
display: flex;
justify-content: space-between;
align-items: center;
}
.topnav button {
border: none;
cursor: pointer;
}
.topnav a {
color: brown;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
color: black;
}
.topnav a.active {
color: black;
}
*/
.line-one {
width: 30px;
}
.line-one {
width: 30px;
}
.line-one {
width: 30px;
}
.menu div {
width: 30px;
height: 4px;
background-color: brown;
margin: 5px 0;
border-radius: 25px;
}
.menu {
width: 30px;
}
.menu:hover div {
width: 30px;
background-color: black;
}
.right-nav {}
.left-nav {}
<?php
declare(strict_types=1);
?>
<!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.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
<link rel="stylesheet" href="./css/site.scss">
<script type="text/javascript" src="./js/toggletheme.js" defer></script>
</head>
<body>
<header>
<div class="topnav">
<div class="left-nav">
<p class="logo-style">Web title</p>
</div>
<div class="right-nav">
Home
Archives
Coverage
<a href="#menu" class="menu">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</a>
</div>
</div>
</header>
</body>
</html>
Put this on your .right-nav
Display flex is very useful for this kind of situations.
Property flex-direction isn't neccesary, display flex itself is flex-direction: row; by default.
The gap isn't neccesary too, it just makes a gap between your items.
align-items is to align your items vertically in the center.
.right-nav {
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
}
You forgot to use display: flex; to .right-nav class. And center elements properly align-items: center; justify-content: center;
Now everything works fine:-) Best regards!
.right-nav {
display: flex;
align-items: center;
justify-content: center;
}
.logo-style {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 32px;
line-height: 39px;
/* identical to box height */
letter-spacing: 0.05em;
color: #4c5ba0;
}
/*
Navigation bar three lines menu
/*
Navigation
*/
.topnav {
overflow: hidden;
background: none !important;
display: flex;
justify-content: space-between;
align-items: center;
}
.topnav button {
border: none;
cursor: pointer;
}
.topnav a {
color: brown;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
color: black;
}
.topnav a.active {
color: black;
}
.right-nav {
display: flex;
align-items: center;
justify-content: center;
}
*/ .line-one {
width: 30px;
}
.line-one {
width: 30px;
}
.line-one {
width: 30px;
}
.menu div {
width: 30px;
height: 4px;
background-color: brown;
margin: 5px 0;
border-radius: 25px;
}
.menu {
width: 30px;
}
.menu:hover div {
width: 30px;
background-color: black;
}
<header>
<div class="topnav">
<div class="left-nav">
<a href="#news">
<p class="logo-style">Web title</p>
</a>
</div>
<div class="right-nav">
Home
Archives
Coverage
<a href="#menu" class="menu">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</a>
</div>
</div>
</header>
There are many different ways to go about creating this display, but probably the most straightforward approach in modern CSS is to use CSS Flexbox.
(Or, in this case, two nested Flexboxes.)
The example below has two elements which use:
display: flex;
One is the <header> itself, which means its two immediate children:
<h2 class="logo-style">
<nav>
will be flexibly positioned along its horizontal axis.
The other is the <nav>, which means its two immediate children:
<ul>
<a class="menu">
will in turn also be flexibly positioned along its own horizontal axis.
Note that the <header> has a justify-content value of space-between which means that the first of its two children will be positioned towards the left and the second will be positioned towards the right.
By contrast, the <nav> has a justify-content value of flex-end which means that both of its children will be positioned towards the right.
Working Example:
header {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-style a {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 32px;
line-height: 39px;
letter-spacing: 0.05em;
color: #4C5BA0;
}
nav {
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul li {
display: inline-block;
margin-right: 18px;
padding: 6px;
border-radius: 6px;
}
nav ul li:hover {
background-color: #4C5BA0;
}
nav ul li:hover a {
color: rgb(255, 255, 255);
}
.menu {
display: inline-block;
width: 30px;
height: 27px;
background: linear-gradient(brown 0% 20%, white 20% 40%, brown 40% 60%, white 60% 80%, brown 80% 100%);
}
.menu:hover {
height: 27px;
background: linear-gradient(black 0% 20%, white 20% 40%, black 40% 60%, white 60% 80%, black 80% 100%);
}
<header>
<h2 class="logo-style">Web title</h2>
<nav>
<ul>
<li>Home</li>
<li>Archives</li>
<li>Coverage</li>
</ul>
</nav>
</header>
I'm having a very basic problem with the CSS in my React website, and I was looking for some help.
I have a very barebones header section set up
HTML:
<div className="nav">
<div className="menu">
Menu
</div>
<div className="logo">
<a className="title" href="/">Brand Name</a>
<a className="subtitle" href="/">Slogan</a>
</div>
<div className="lang">
<ul>
<li>FB</li>
<li>IG</li>
<li>TW</li>
</ul>
</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
}
.nav{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
color: white;
text-decoration: none;
font-family: Visual;
letter-spacing: 1px;
width: 100%;
.menu{
a{
text-decoration: none;
color: white;
letter-spacing: 1.3px;
font-size: 1.2rem;
}
}
.logo{
.title{
font-size: 2rem;
}
.subtitle{
text-align: center;
margin-top: 5px;
}
a{
text-decoration: none;
color: white;
display: block;
}
}
.lang{
font-size: 1.2rem;
ul{
li{
display: inline;
margin-left: 10px
}
}
}
}
The flex seems to be working, but when I resize the window horizontally, the center element gets pushed off center and eventually out of the screen on one side.
Is this related to media queries?
add padding: 0; property to ul in your css
ul {
padding: 0;
li {
display: inline;
margin-left: 10px;
}
}
You can use border styling something like
border: 1px solid black;
when have problems with css. In this way, you can see which elements have unexpected properties like paddings or margins. When you use border styling for your ul, you will see it has padding. Make padding zero and your items will be centralized.
Banners
I am looking to "spread out" my centered banner in HTML. I was able to actually spread out the text, but I want to make the links from the banner bigger, as they are currently on the size of my text. If any clarification is needed, please let me know.
body {
margin: 0;
font-family: Times New Roman;
}
.topnav {
overflow: hidden;
background-color: #0F5AEA;
display: flex;
justify-content: center;
justify-content: space-between;
}
.topnav a {
float: left;
color: #F2F2F2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #BBEAFA;
color: black;
}
.topnav a.active {
background-color: #6F16A5;
color: white;
}
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div style="padding-left:16px">
<h2>Top Navigation Example</h2>
<p>Some content..</p>
</div>
Simply add flex-grow: 1 to the navigation links. If you want all of them to be the same width, you can use flex: 1 which does the same as a combination of flex-grow: 1 and flex-basis: 0.
.topnav a {
flex-grow: 1; // or flex: 1;
float: left; // this does not have effect on flex items by the way
color: #F2F2F2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
If you want to learn more, there is no need to repeat already well documented:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
Here is one of your options:
body {
margin: 0;
font-family: Times New Roman;
}
.topnav {
overflow: hidden;
background-color: #0F5AEA;
display: flex;
justify-content: center;
justify-content: space-between;
}
.topnav a {
flex: 1;
float: left;
color: #F2F2F2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #BBEAFA;
color: black;
}
.topnav a.active {
background-color: #6F16A5;
color: white;
}
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div style="padding-left:16px">
<h2>Top Navigation Example</h2>
<p>Some content..</p>
</div>
Just give it a max-width:25% and force width: 100%. Also you do not need float since you're using flex.
.topnav a {
max-width: 25%;
width: 100%;
color: #F2F2F2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
Check it live on Codepen here.
I would like for my 'Acme Web Design' header and navigation all to be on the same line?
I have tried to change the bottom margin for the navigation to make it position on the same line as my header but that doesn't seem to work.
Snippet of my HTML and CSS file:
header {
background-color: #35424a;
border-bottom: 2px solid #ff6600;
color: white;
padding-top: 30px;
min-height: 70px;
}
nav {
float: right;
margin-bottom: 30px;
}
nav a {
color: white;
text-decoration: none;
padding: 10px;
}
<header>
<div class="container">
<div id="top header">
<h1>Acme Web Design</h1>
</div>
<nav>
HOME
ABOUT
SERVICES
</nav>
</div>
</header>
Here is how it looks like with my HTML and CSS file:
This is how I want it to look like:
The easiest way is to use flexbox on the container DIV, with the following settings:
.container {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
BTW: You have two IDs on your 'top header' element - one is definitely enough....
.container {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
header {
background-color: #35424a;
border-bottom: 2px solid #ff6600;
color: white;
padding-top: 30px;
min-height: 70px;
}
nav {
margin-bottom: 30px;
}
nav a {
color: white;
text-decoration: none;
padding: 10px;
}
<header>
<div class="container">
<div id="top header">
<h1>Acme Web Design</h1>
</div>
<nav>
HOME
ABOUT
SERVICES
</nav>
</div>
</header>
Have you heard of flexbox? It's a great option for alignment issues like this.
.container {
background-color: #35424a;
border-bottom: 2px solid #ff6600;
color: white;
padding: 0 30px;
min-height: 70px;
/*
add 'display: flex'
(and any additional flex properties)
to the containing element
*/
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: no-wrap;
justify-content: space-between;
}
nav a {
color: white;
text-decoration: none;
padding: 0 10px;
}
<header>
<div class="container">
<div id="top header">
<h1>Acme Web Design</h1>
</div>
<nav>
HOME
ABOUT
SERVICES
</nav>
</div>
</header>
Here's a fun tutorial to learn more: https://flexboxfroggy.com/
You need to provide margin-top instead of margin-bottom for nav class.
Following is the link to JSbin
header {
background-color: #35424a;
border-bottom: 2px solid #ff6600;
color: white;
padding-top: 30px;
min-height: 70px;
}
header h1 {
float:left;
}
nav {
float:right;
margin-top:5%
}
nav a {
color: white;
text-decoration: none;
padding: 10px;
}
<header>
<div class="container">
<span id="top header">
<h1>Acme Web Design</h1>
</span>
<nav>
HOME
ABOUT
SERVICES
</nav>
</div>
</header>
You can try it by using float.
header {
background-color: #35424a;
border-bottom: 2px solid #ff6600;
color: white;
min-height: 70px;
line-height: 70px;
}
nav {
width: auto;
float: right;
margin-bottom: 30px;
}
nav a {
color: white;
text-decoration: none;
padding: 10px;
}
#topheader{
width: auto;
float: left;
}
#topheader h1{
margin: 0;
}
<header>
<div class="container">
<div id="topheader">
<h1>Acme Web Design</h1>
</div>
<nav>
HOME
ABOUT
SERVICES
</nav>
</div>
</header>