I create a navbar. I started to design it with mobile first method. then I start to design for bigger screen sizes. here I faced to a problem with layout. in navbar I have these elements : logo, li tags, shopping cart icon, button. I want to put logo and li to the right side, and put the shopping cart icon and button to the left. I'll show you the screen capture in mobile:
here is the screen capture in mobile screen in this size, layout has no problem. but, I will show you the screen capture of bigger screen size:screen capture in bigger size the problem is that the li tags go to the left side that it shouden't be like that. it should be next to the logo. I think the problem is in the html codes. the order of the html codes are like this : logo, hamburger menu, shopping cart icon, button and then li tags. I think the problem is because of the li tags are the last elemnt. but if I change the order, I'll faced to a problem in mobile screen size. would you plz help me to solve the problem? By the way, I forgot to say I wrote it with css flex.
here is the html codes:
*{
font-family: myfont;
direction: rtl;
margin:0;
padding: 0;
}
.nav-logo{
width: 70px;
cursor: pointer;
}
.hamburger-menu{
display: flex;
margin-right: 20px;
cursor: pointer;
font-size: 25px;
color: #e63946;
}
nav{
padding: 10px;
background-color: #ffffff;
background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 17.5px );
-webkit-backdrop-filter: blur( 17.5px );
border: 1px solid rgba( 255, 255, 255, 0.18 );
}
.row{
display: flex;
align-items: center;
justify-content: space-between;
}
.right{
display: flex;
justify-content: flex-start;
margin-right:30px;
}
.left{
display: flex;
justify-content: flex-end;
margin-left:30px;
}
.column{
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
cursor: pointer;
}
.nav-item{
list-style: none;
}
.nav-item a{
text-decoration: none;
color: #35357a;
line-height: 40px;
}
.nav-item a:hover{
color: #e63946;
}
.btn-login{
background-color: #e63946;
color:white;
border: none;
padding: 10px 20px;
border-radius:50px;
font-size: 15px;
cursor: pointer;
}
#media screen and (min-width: 646px) {
nav{
display: flex;
flex-direction: row;
}
.nav{
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
padding: 10px;
}
.navbar{
list-style: none;
display: flex;
justify-content:flex-end;
}
.column{
}
.hamburger-menu{
display: none;
cursor: pointer;
font-size: 25px;
color: #e63946;
}
.right{
display: flex;
align-items: center;
justify-content:flex-end;
}
.left{
display: flex;
align-items: center;
justify-content: flex-start;
margin-left: 20px;
}
}
<body>
<nav class="nav">
<section class="row">
<div class="right">
<div>
<img class="nav-logo" src="images/golgasht1.png"/>
</div>
<div class="hamburger-menu">
<i class="fa fa-bars"></i>
</div>
</div>
<div class="left">
<span class="cart-btn">
<i class="fas fa-shopping-cart"></i>
<span class="cart-items">0</span>
</span>
<button class="btn btn-login px-4 ml-5">ورود </button>
</div>
</section>
<section class="column">
<ul class="navbar">
<li class="nav-item">
<a class="nav-link">فارس گردی</a>
</li>
<li class="nav-item">
گالری عکس
</li>
<li class="nav-item">
تور مجازی
</li>
<li class="nav-item">
وبلاگ
</li>
</ul>
</section>
</nav>
</body>
Put all of your navbar items into one flex container, and use the order property and #media queries to change their visual order.
You correctly noticed that your HTML markup was the problem. There are two section elements inside your nav, and that made it hard to put one section (the links) in between the elements of the other section (between the shopping cart and the logo).
This layout can be achieved with either CSS Grid, or with Flexbox. I’ll stick to Flexbox because you already started with it.
Mobile-first layout
vertically arrange the list of links
place the list of links below all the other elements of the navbar (we’ll use flex-wrap: wrap to create a multi-line flex container, and flex-basis: 100% on the list of links to make sure it wraps into a second line)
Screenshot of the mobile layout
Large screen layout (defined in a #media query)
hide the hamburger menu button
horizontally arrange the list of links
place the list of links after the logo, and before the other elements in the navbar. We’ll reset the flex-basis of this item so it no longer wraps into a second line and use the order property to change the visual order
Screenshot of the large screen layout
The order property lets us keep our HTML markup in the same order, but change the visual order of the individual flex items. So you can have your list of links last in your HTML, but then visually show it somewhere else.
All flex items start with an initial order value of 0. Because they’re all in the same ordinal group of 0, they will be visually laid out in the same order as your HTML. But if you give your list of links an order of -1, then it will be laid out before all the items with order: 0.
Here’s a simplified version of your code with a working solution:
body {
margin: 0;
}
.navbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
padding: 24px;
border-bottom: 1px solid black;
}
.shopping-cart-icon {
margin-inline-start: auto;
}
.login-button {
padding: 10px 20px;
background-color: #e63946;
color: white;
border-radius: 50px;
}
nav {
flex-basis: 100%;
}
.link-list {
display: flex;
flex-direction: column;
list-style-type: none;
padding: 0;
margin: 0;
}
.link-list li {
text-align: center;
padding: 12px 0;
}
.logo {
width: 80px;
}
.hamburger-menu-button {
width: 32px;
}
.shopping-cart-icon {
width: 40px;
}
#media screen and (min-width: 646px) {
.hamburger-menu-button {
display: none;
}
.logo {
order: -2;
}
nav {
order: -1;
flex-basis: initial;
}
.link-list {
flex-direction: row;
gap: 16px;
}
}
<body dir="rtl">
<header class="navbar">
<img class="logo" src="https://i.imgur.com/fFezxJ0.png" alt="Logo" />
<img class="hamburger-menu-button" src="https://i.imgur.com/8bIOZ09.png" alt="Menu" />
<img class="shopping-cart-icon" src="https://i.imgur.com/3jN32Vl.png" alt="Shopping cart" />
<a class="login-button" href="login.html">ورود</a>
<nav>
<ul class="link-list">
<li>فارس گردی</li>
<li>گالری عکس</li>
<li>تور مجازی</li>
<li>وبلاگ</li>
</ul>
</nav>
</header>
</body>
Related
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.
I'm trying to align my menu-content items as shown in the images attached.
I am able to align the nav-menu contents. But not the insta-logo and hr.
Can you tell me how to code it properly with explanation.
body
{
background-color: black;
}
.header
{
margin: 50px 122px 0px 122px;
}
.logo
{
color: white;
float: left;
}
.nav-menu
{
margin: 0px;
float: right;
}
.nav-menu li
{
padding-left: 82px;
display: inline;
}
.nav-menu a
{
text-decoration: none;
font-family: Roboto;
font-size: 18px;
color: #808080;
}
.nav-menu hr
{
transform: rotate(90deg);
border: 0.1px solid #FFFFFF;
float: right;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Website</title>
</head>
<body>
<div class="header">
<div class="logo">
<h1>Logo</h1>
</div>
<div class="menu-content">
<div class="nav-menu">
<ul>
<li><a title="click to see my work" href="index.html">Work</a></li>
<li><a title="about me and contact info" href="about-contact.html">About+Contact</a></li>
</ul>
<hr style="width:100px;"> <!--nav and insta separate line-->
<div class="insta-logo">
<img title="My Insta account"src="images/insta-logo-svg.svg" alt="Insta profile link">
</div>
</div>
</div>
</div>
<hr>
</body>
</html>
See my attached image for reference
Please read the CSS Comments for explanation:
/* CSS Reset for total control over all padding / margins */
* {
padding: 0;
margin: 0;
display: border-box;
}
body {
height: 100vh;
background-color: black;
font-family: arial;
}
/* Create navbar container */
.navbar {
height: 60px;
width: 100%;
display: flex; /* flex (or Flexbox) divs automatically inner elements into a row */
justify-content: space-around; /* Justify content lets you determine how the inner items behave on an x axis in a Flexbox */
align-items: center; /* Align items lets you determine the alignment of inner elements on a Y axis in a flexbox. In this case, you're centering the items in the middle. */
background-color: black;
color: white;
border-bottom: 1px solid grey;
}
.navbar-logo {
font-size: 30px;
}
.navbar-menu { /* Create a container for the navbar-menu items (excludes things you don't want users to click on_. In this case, this should include your links, divider, and logo */
display: flex;
align-items: center;
}
.navbar-menu ul { /* Align items horizontally again for the link list */
display: flex;
justify-content: center;
list-style: none;
}
.navbar-menu a { /* Basic link styling */
display: inline-block;
margin: 0 10px;
text-decoration: none;
color: white;
transition: all .2s ease;
}
.navbar-menu a:hover {
color: #21abde;
}
/* Line for the divider */
.navbar-menu-divider {
height: 60px;
background-color: grey;
width: .5px;
}
/* Example block for instagram logo. You'll have to either use the CDN from fontawesome.com or downlaod an image of the logo to have the real one */
.ig-logo {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
margin: 10px;
background-color: grey;
cursor: pointer;
transition: .2s ease;
}
.ig-logo:hover {
color: white;
background: #21abde;
}
<body>
<nav class="navbar">
<div class="navbar-logo">Logo</div>
<div class="navbar-menu">
<ul>
<li>Work</li>
<li>About+Contact</li>
</ul>
<div class="navbar-menu-divider"></div>
<div class="ig-logo">IG</div>
</div>
</nav>
<body>
Welcome to the community.
Remove the right and left margin of the element with class="header", or make it smaller.
Add the following css properties to the element with class="header":
display: flex;
justify-content: space-between;
CSS flex rules are a great way to organize your web layout. In this case, the elements will move away from each other, and they will occupy the whole width of the header.
I'm a newbie to frontend development and have been experimenting with making custom templates for practice. I created a responsive navbar containing a right-aligned 'Contact' button along with an icon from FontAwesome. The problem arises when the navbar collapses -- the 'Contact' icon seems to shift above the Contact text. Could anyone help me out? I'm attaching some images and code here.
<nav>
<ul class='main-nav'>
<li id="logo">Brand</li>
<li>About</li>
<li>Projects</li>
<ul class='right-nav'>
<li id="contact"><i class="fas fa-envelope-square"></i> Contact</li>
</ul>
</ul>
</nav>
nav{
background-color: rgba(0, 0, 0, 0.75);
font-size:1.33rem;
position: relative;
}
#logo{
margin-right: 3rem;
}
ul{
display: inline-flex;
margin-bottom:0;
margin-top:0;
padding:0;
list-style-type: none;
flex-flow:row;
justify-content: flex-start;
align-items: center;
}
.right-nav{
position: absolute;
right: 0;
}
a{
display: inline-block;
color: antiquewhite;
text-decoration: none;
padding:0.75rem 2.0rem;
}
a:hover{
text-decoration: none;
background-color: rgba(243,134,48,0.5);
color: rgb(255, 255, 255);
font-weight: 500;
}
li{
cursor: pointer;
}
#media all and (max-width:600px){
.main-nav{
flex-direction: column;
width: 100%;
}
a{
padding: 12px 600px;
}
nav{
display: flex;
flex-flow: row wrap;
justify-content: center;
}
#logo{
margin-right: inherit;
}
.right-nav{
position: unset;
}
}
You could use the white-space: nowrap css property to prevent the text wrapped to the next line :
#media all and (max-width:600px){
.main-nav li a{
white-space: nowrap;
}
...
You haven't defined contact in the style sheet , so just define it and keep the position relative
Set the link width of contact to 100%
#media all and (max-width:600px){
#contact a {
width: 100%;
}
}
I was just wondering how I would go about horizontally aligning all of the contents of the ul (unordered list) to the centre if that makes sense. As in instead of having their bottoms aligned, having their centres aligned.
Here is a photo of what it looks like currently: https://postimg.cc/S2YrpR24
Here is what I would like it to look like (Edited in photoshop): https://postimg.cc/N9YQT96G
My HTML for my header looks like this:
<header>
<nav>
<ul>
<li><a>Contact Us</a></li>
<li><a>Sign Up</a></li>
<li><img id="logo" src="img/schule logo light.png" alt="mainlogo"></li>
<li><a>Our Resources</a></li>
<li><a>The Teachers</a></li>
</ul>
</nav>
</header>
and my css looks like this:
header{
background-color: rgba(0,0,0,.5);
backdrop-filter: blur(10px);
color: #000000;
padding-top: 10px;
min-height: 110px;
position: fixed;
width: 100%;
}
header h1{
font-weight: 600;
margin: 30px 0px 0px 0px;
color: #000000;
}
header a{
text-decoration: none;
font-size: 20px;
color: #FFFFFF;
}
header img{
padding-top: 0px;
width: 40px;
}
header ul{
text-align: center;
padding: 15px;
margin: 0px;
}
header li{
display: inline-block;
list-style: none;
padding: 0px 30px 0px 30px;
}
Welcome to SO!
This looks like a very good use for flexbox, a decent demo site:
HEADER UL {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
-webkit-align-content: stretch;
align-content: stretch
}
Maybe change
header img {
padding-top: 0px;
}
to
header img {
padding-top: 30px;
}
?
Hard to say with that snippets. Or post an URL?
Here is a working example using flex and vertically aligned items:
<header>
<nav>
<ul>
<li><a>Contact Us</a></li>
<li><a>Sign Up</a></li>
<li><img src="https://via.placeholder.com/200x100" alt="test image"></li>
<li><a>Our Resources</a></li>
<li><a>The Teachers</a></li>
</ul>
</nav>
</header>
<style>
ul {
display: flex;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0;
align-items: center;
}
li {
display: block;
flex: 0 1 auto;
list-style-type: none;
}
</style>