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%;
}
}
Related
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
}
nav{
height: 85px;
width: 100%;
z-index:1001;
}
label.logo{
color: rgb(255, 255, 255);
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,a:hover{
background: #1b9bff;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
#media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
position: fixed;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 0px;
font-weight: bold;
}
nav {
z-index: 1001;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #0082e6;
}
#check:checked ~ ul{
left: 0;
}
}
.vid-background {
z-index: -100;
width:100%;
height:80vh;
overflow:hidden;
position:fixed;
top:0;
left:0;
}
.reg-element {
width:100%;
height:80vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles.css"/>
<title>SnowWarrior Landing Page</title>
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<img src="https://img.icons8.com/ios-glyphs/30/000000/menu--v1.png" alt="menu"/>
</label>
<label class="logo">SnowWarrior</label>
<ul>
<li>Home</li>
<li> Shop</li>
<li> Contact</li>
</ul>
</nav>
<div class="vid-background">
<video autoplay loop muted>
<source src="./assets/winter1.mp4">
</video>
</div>
<section></section>
<div class="reg-element">
<span>Just saying</span>
</div>
</body>
</html>
The video overflowing into the navbar is by choice since that is what I'm trying to achieve. However, when I try to add more div elements with text in there, it shows up behind the video instead of below the video. I'm very new to HTML and CSS (just dived into these two days ago) so I may be doing some things wrong here. But I would be glad if someone could point the right thing out to me.
Edit: Does anyone know how to embed a video into an HTML so it shows on StackOverflow?
This would be my approach:
Using modern layout algorithms such as flexbox&grid rather than absolute positioning hell. Here I have a header with the nav and video as children. The header is a grid where the nav is explicitly set to take up the top section and the video explicitly told to take up the full grid.
Smaller components use flexbox to flex along a single axis, and when out of room, wrap onto a new line to allow the website to be responsive on small screen widths, removing the need for media queries here.
If you don't understand something and want me to update this answer to explain it, drop a comment.
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: montserrat;
}
header {
display: grid;
grid-template: min-content 9fr / 1fr;
width: 100%;
min-height: 80vh;
color: white;
}
nav {
grid-area: 1 / 1 / 2 / 2;
height: min-content;
z-index: 10;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
padding: 1rem;
background-color: #0004;
background-blend-mode: darken;
}
.vid-background {
grid-area: 1 / 1 / 2 / 3;
}
.vid-background>* {
width: 100%;
}
h1 {
font-size: 2rem;
}
nav ul {
flex-basis: max-content;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
nav ul li a {
padding: .5rem 1rem;
border-radius: 3px;
color: inherit;
text-transform: uppercase;
transition: .5s;
}
a:active,
a:hover {
background: #1b9bff;
}
<header>
<nav>
<h1>SnowWarrior</h1>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
<div class="vid-background">
<img src="https://source.unsplash.com/random/800x400">
</div>
</header>
Just saying
This is because you're using position:fixed for everthing at the top, which then sadly makes your next element not care about its existance.
Simply put, if you put position:fixed, and then simply add an div with no position defined, they will not relate to eachother. As I do not know how you wish this to work I cannot fix the code for you, hence I will have to simply inform you about this and hopefully you'll be pointed in the direction you asked for - check position out in some css tutorials.
Display:flex is a good place to start.
I'm having a bit of an issue where I can't get the icons to correctly align. If I remove the section for all the icons, the Logo & title align perfectly, however when adding the icons, it causes massive issues. Sorry if this is a silly question, html is new to me!
I'm using a base HTML5 template for the design elements: HTML5UP Editorial
HTML & CSS:
/* Header */
#header {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
border-bottom: solid 5px #f56a6a;
padding: 6em 0 1em 0;
position: relative; }
#header > * {
-moz-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-bottom: 0; }
#header .logo {
border-bottom: 0;
color: inherit;
font-family: "Roboto Slab", serif;
font-size: 1.125em; }
#header .icons {
text-align: right; }
#media screen and (max-width: 1680px) {
#header {
padding-top: 5em; } }
#media screen and (max-width: 736px) {
#header {
padding-top: 6.5em; }
#header .logo {
font-size: 1.25em;
margin: 0; }
#header .icons {
height: 5em;
line-height: 5em;
position: absolute;
right: -0.5em;
top: 0; } }
/* Icons */
ul.icons {
cursor: default;
list-style: none;
padding-left: 0; }
ul.icons li {
display: inline-block;
padding: 0 1em 0 0; }
ul.icons li:last-child {
padding-right: 0; }
ul.icons li .icon {
color: inherit; }
ul.icons li .icon:before {
font-size: 1.25em; }
<!-- Header -->
<header id="header">
<div>
<img style="vertical-align:middle; margin-right:0.5em;"; src="images/cat-logo.png"; alt=""; width="64"; height="64";/>
<a class="logo"><strong> Oscat Pets</strong></a>
<ul class="icons">
<li><span class="label">Facebook</span></li>
<li><span class="label">Twitter</span></li>
<li><span class="label">Instagram</span></li>
<li><span class="label">Snapchat</span></li>
<li><span class="label">Medium</span></li>
</ul>
</div>
</header>
Example of Current Broken Alignment
Example of how Alignment should look
Example of Header without icons being generated
Example of HTML Inspect
You have to add below code to your css to get it working.
#header > div {
display: flex;
align-items: center;
}
#header > div > ul.icons {
margin-left: auto;
}
Try the following. I separate into two div and float the logo div to left
<style>
/* Header */
#header {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
border-bottom: solid 5px #f56a6a;
padding: 6em 0 1em 0;
position: relative;
}
#header>* {
-moz-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-bottom: 0;
}
#header .logo {
border-bottom: 0;
color: inherit;
font-family: "Roboto Slab", serif;
font-size: 1.125em;
}
#header .icons {
text-align: right;
}
#media screen and (max-width: 1680px) {
#header {
padding-top: 5em;
}
}
#media screen and (max-width: 736px) {
#header {
padding-top: 0;
}
#header .logo {
font-size: 1.25em;
margin: 0;
border: 0;
}
#header .icons {
height: 5em;
line-height: 5em;
right: -0.5em;
top: 0;
}
}
/* Icons */
ul.icons {
cursor: default;
list-style: none;
padding-left: 0;
}
ul.icons li {
display: inline-block;
padding: 0 1em 0 0;
}
ul.icons li:last-child {
padding-right: 0;
}
ul.icons li .icon {
color: inherit;
}
ul.icons li .icon:before {
font-size: 1.25em;
}
</style>
<!-- Header -->
<header id="header">
<div style="float: left;">
<img style="vertical-align:middle; margin-right:0.5em;" ; src="images/cat-logo.png" ; alt="" ; width="64" ; height="64" ;/>
<a class="logo"><strong> Oscat Pets</strong></a>
</div>
<div>
<ul class="icons">
<li><span class="label">Facebook</span></li>
<li><span class="label">Twitter</span></li>
<li><span class="label">Instagram</span></li>
<li><span class="label">Snapchat</span></li>
<li><span class="label">Medium</span></li>
</ul>
</div>
</header>
The template CSS you showed has some stuff in there that is either very outdated, or just pretty horrible. Because, even though it explicitly uses flexbox, it then uses oldschool positioning and such to do the things that flexbox is actually good at; weird.
Anyway, this should give you all you asked for:
/* reset header CSS to saner defaults */
#header, #header > div, #header div > a, #header .logo, #header ul.icons, #header ul.icons li, #header ul.icons li .icon {
position: static;
display: flex;
flex: 0 0 auto;
height: auto; width: auto;
line-height: normal;
padding: 0;
}
/* now define the header layout */
#header { padding: 1em; }
#header > div { width: 100%; flex-flow: row nowrap; justify-content: flex-start; align-items: center; align-content: center; gap: 1.0em; }
#header ul.icons { flex: 1 1 auto; flex-flow: row wrap; justify-content: flex-end; align-items: center; align-content: center; gap: 0.5em; }
Just place that CSS in your stylesheet (somewhere under/after the template code).
Be aware by the way, your <a ... class="logo"> element contains some odd ;s. You use ; separators inside the style="" argument, but not outside it in the HTML.
Try using position: relative instead of position: absolute.
For further understanding you could try refer this page.
#header .icons {
height: 5em;
line-height: 5em;
position: relative;
right: -0.5em;
top: 0; } }
Hi thanks all for the feedback & advice! Turns out after about 6 hours of trying lots of different things, all that was missing was a simple statement for the ul class:
style="align-self: flex-end;"
Text is now being properly aligned although the base code has changed:
<!-- Header -->
<header id="header">
<a href="index.php" class="logo"><img style="vertical-align:middle; margin-right:0.5em;" src="images/cat-logo.png" alt="" width="64" height="64" />
<strong> Oscat Pets</strong></a>
<ul class="icons" style="align-self: flex-end;">
<li><span class="label"; >Facebook</span></li>
<li><span class="label">Twitter</span></li>
<li><span class="label">Instagram</span></li>
<li><span class="label">Snapchat</span></li>
<li><span class="label">Medium</span></li>
</ul>
</header>
Ultimately, there was nothing wrong with the template, I had just used the wrong functions. Although Raxi's contributions will be taken into consideration, upon further manipulating the project!
Thanks to everyone supporting so quickly on my first post! I really appreciate this, and will be sure to engage fully on this site!
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>
I tried several times, float: right or display: inline-block, but it didn't work on my side. Can anyone guys help me to achieve it? I want to display my navigation next to each other just like below.
I tried to run several codes just what I mention above. But seems it need your help to work it properly.
.menu {
list-style-type: none;
display: inline-block;
padding: 0 11px;
font-size: 1.5rem;
margin-right: 6rem;
font-family: "Montserrat", sans-serif;
}
ul li .link {
position: relative;
display: inline-block;
}
ul li a {
text-decoration: none;
text-transform: uppercase;
}
.head {
position: relative;
text-align: right;
width: 100%;
padding: 22px 48px 25px;
border-bottom: 1px solid #f5f5f5;
}
div .logopix {
height: 5rem;
display: inline-block;
font-size: 0;
top: 1.1rem;
left: 37px;
position: absolute;
}
<div class="head">
<img class="logopix" src="./images/logo.png" alt="HUB Motivator Logo" >
<ul class="menu">
<li class="link"> About </li>
<li class="link"> Contact Us </li>
</ul>
</div>
add css in
.menu {
display: flex;
justify-content: flex-end;
}
Following same technique as you used with inline-block, to display li on same line add:
ul li {
display: inline-block;
}
Here is the code: Codepen
You can achieve the same requirement by writing very minimal semantic code and styling. Please check the code below.
Semantic HTML code
<header class="header">
<img src="http://via.placeholder.com/150x60"/>
<nav class="navbar">
About
Services
Contact
</nav>
</header>
CSS Style
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar a {
padding-left: 10px;
font-size: 20px;
}
View Demo : jsfiddle
My navbar won't align with the center of the page. In fact any code i added to change the margins between each individual link is also not working, idk why that is. I made the position absolute because I couldn't find any other way to get the navbar to go in front of the background/ the slideshow in my side (not shown here). I have included a fiddle. Also I tried making a centered navbar that would be transparent, have my next element be behind it but I couldn't.
https://jsfiddle.net/ep93zz08/
HTML:
<div id="navbar" class="li flex-container nav row">
<a class="nav-link flex-item " href="index.html">PHOTOGRAPHER</a>
<a class="nav-link flex-item" href="#">PORTFOLIO</a>
<a class="hplogo-a flex-item " href="idex.html"><img id="logo" src="http://www.dynamicaudiovideo.com/_Media/samsung_logo_large.jpeg" alt=""></a>
<a class="nav-link flex-item" href="Investment.html">INVESTMENT + FAQ</a>
<a class="nav-link flex-item" href="#">BLOG</a>
</div>
CSS:`
body{
margin:0;
overflow-x: hidden;
font-family: Calibri;
font-style: normal;
font-variant: normal;
background:black;
}
.nav{
position: absolute;
list-style-type: none;
display: inline;
z-index: 2;
text-align: center;
}
.resize-anchor{
display: inline-block;
height: auto;
width: 300px;
}
.hplogo-a{
display: inline-block;
height: auto;
width: 200px;
min-width: 200px;
}
a:hover{
color:#D1946F;
text-decoration: none;
}
a:link{
color:#D1946F;
text-decoration: none;
}
.navlink, .hplogo-a{
text-align: center;
display:inline-block;
margin-left: 50px;
margin-right: 50px;
padding:0;
}
.nav-link{
color:white;
text-decoration: none;
white-space: nowrap;
text-align: center;
font-family: Calibri;
font-size: 18px;
font-style: normal;
font-variant: normal;
line-height: 26.4px;
margin-top: 20px;
}
.sticky {
position: fixed;
top: 0;
width: 100%
z-index: 3;
}
.li{
text-align: center;
}
.flex-container {
display: flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
}
.flex-item {
margin: 5px;
}
img{
width: 100%;
}
`
It would be better to add CSS rules for #navbar selector. Because rules for .nav will affect to all HTML elements with .nav class. Using the #navbar selector, the rules will only affect the specific div with that id. Try to remove the rules for .nav and add this:
#navbar {
position: relative;
list-style-type: none;
z-index: 2;
justify-content: center;
}
to adjust the margins between links:
#navbar a {
margin-right: 20px;
}
https://jsfiddle.net/ep93zz08/8/
One easy way that I used when trying to center the navbar is under .li or ul.li use the following:
margin-left: auto;
margin-right: auto;
Or you can use the following and add your own flare to it:
#nav {
width:750px;
margin:0 auto;
list-style:none;
}
#nav li {
float:left;
}
#nav a {
display:block;
text-align:center;
width:150px; /* fixed width */
text-decoration:none;
}
With the following html to follow up:
<ul id="nav">
<li>HOME</li>
<li>CAPABILITIES</li>
<li>ABOUT US</li>
<li>RFQ</li>
<li>CONTACT US</li>
</ul>
You can add this styling to the navbar ID.
left:50%; transform:translateX(-50%);
You should look at some of your CSS because you are using position absolute on the navbar ID and then display flex on the flex-container class of that same div. It looks like you are trying to center the div using two different methods.