I've made this navigation bar but I can't get it to look the way I want it to look
i would like the logo to be separated from the navigation elements but they do not move when I place a position fixed. The logo on the left side and the navigation elements on the right side with a space-between
tried to make the header with fixed position and then enclose the elements in a div to separate them but it didn't work.
If you share your code, I may be able to help more, but as an idea. You could have your logo and then the navigation elements in a ul like the following, therefore you are creating space between the ul and the image but the navigation elements are spaced however you want:
<nav class="navbar">
<img src="logo" />
<ul :class="nav-menu" >
<li class="nav-item">
<a href='#'>thing</a>
</li>
<li class="nav-item">
<a href='#'>another thing</a>
</li>
<li class="nav-item">
<a href='#'>Sign Out</a>
</li>
</ul>
.navbar {
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.nav-menu {
display: flex;
justify-content: space-around;
align-items: center;
gap: 60px;
}
img {
// image styling
}
Related
In most websites, if you squeeze/reduce the width of browser window, the row of navigation links in the top navigation bar collapses into a drop-down menu button because of overflow. How can I add that feature to my website?
Currently, the overflowing links/buttons in my website just disappear if I reduce the size/width of my browser window. How can I use a drop-down menu button in case of overflow due to reduced width?
You can achieve that with media queries by targeting the max-with of desired-size like shown in the example if the size of the browser goes below 1700x its gonna change its flex-direction to column and change the height to auto.
* {
font-size:40px;
margin: 0;
padding: 0;
}
.navbar-nav{
display: flex;
justify-content: center;
align-items: center;
height: 2rem;
background-color: gray;
}
.nav-links{
list-style: none;
padding: 0.5rem;
font-family:Arial, Helvetica, sans-serif
}
#media only screen and (max-width: 1700px){
.navbar-nav{
height: auto;
flex-direction: column;
background-color: gray;
}
}
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-links">Home</li>
<li class="nav-links">About</li>
<li class="nav-links">Services</li>
<li class="nav-links">Email</li>
<li class="nav-links">Something</li>
<li class="nav-links">SignUp</li>
<li class="nav-links">Login</li>
<li class="nav-links">Loremips</li>
</ul>
</nav>
</body>
I've was trying to change the display of the nav bar list with media query when the page width shrinks. I put on the padding in between the lists and it's not appearing somehow. I wonder if it's because of flexbox or something else.
HTML CODE
<header id="header">
<h1><img id="header-img" src="https://cdn-icons-png.flaticon.com/512/4907/4907546.png" alt="cat tower">Aristocat Tower</h1>
<nav id="nav-bar">
<ul id="nav-list">
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#howItWorks">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
CSS CODE
#header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#nav-list {
list-style: none;
display: flex;
flex-direction: row;
}
.nav-link {
margin: 1em 1em;
}
#media (max-width: 750px) {
#header {
display: flex;
flex-direction: column;
align-items: center;
}
#nav-list {
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
}
.nav-link {
padding: 5px;
}
}
PAGE PICTURE
You should be applying the padding to <li>, not to <a>. If you change your code to this:
<ul id="nav-list">
<li class="nav-link">Features</li>
<li class="nav-link">How It Works</li>
<li class="nav-link">Pricing</li>
</ul>
The padding should be working properly. If you wanna keep the <a> tags with their classes, you can directly apply the style to the list tags like this:
#nav-list li {
padding: 5px;
}
Also, take a look at this link here.
You're using bootstrap classes here.
You can simply use bootstrap padding classes for padding or if you want margin you can use margin classes.
Use px for horizontal padding, py for vertical padding.
Use mx for horizontal margin, my for vertical margin.
Following with the values (mx-1 to mx-5) or (px-1 to px-5).
<ul class="nav">
<li class="nav-item px-4">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item px-4">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item px-4">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item px-4">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
I've been trying to spread out my navigation bar I just can't seem to do it, I have display: flex; on, with justify-content: space-around, but it doesn't seem to do anything.
https://codepen.io/picklemyrickle/pen/XWjzyvb
Thanks in advance.
<nav id="nav-bar">
<ul>
<li> <a
class="nav-link"
href=#Programs
id="Programs">
Programs </a></li>
<li> <a
class="nav-link"
href=#Results
id="Results"
>Results</a></li>
<li><a
class="nav-link"
href=#Pricing
id="Pricing">
Pricing</a></li>
</ul>
nav > ul {
display: flex;
justify-content: space-around;
}
Here it is:
.navbar{
width: 100%;
position: static;
z-index: 1;
white-space: nowrap;
}
z index makes sure it stays on top, static makes sure it's static to the div,
width 100% make sure it's always the maximum length
I wanted the nav bar right at the top, to have the class with left on the left side, the class with middle right in the middle, and the class with right in the right side.
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.flex-container {
width: 100%;
}
.flex-container ul {
display: flex;
align-items: center;
justify-content: center;
}
.flex-container li {
border: 1px solid red;
}
.flex-container nav ul .nytl {
width: 189px;
height: 26px;
}
.flex-container nav ul .first {
justify-content: flex-start;
}
hr {
margin-top: 10px;
}
<div class="flex-container">
<nav>
<ul>
<li class="left">
<a href="#"><img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
</a>
</li>
<li class="left">
<a href="#"><img src="https://img.icons8.com/material-rounded/16/000000/search.png">
</a>
</li>
<li class="left">SPACE & COSMOS
</li>
<li class="middle"><img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl"></li>
<li class="right"><button>Subscribe</button> .
</li>
<li class="right"><button>Login</button></li>
</ul>
</nav>
<hr>
</div>
Try using auto margins to push the left and right elements away from the middle element.
(Also, since you're using the HTML5 nav element and CSS3 properties, you really don't need a ul to structure your layout. You can simplify your code substantially.)
nav {
display: flex;
align-items: center;
}
nav > * {
border: 1px solid red;
}
.nytl {
margin: 0 auto;
width: 189px;
height: 26px;
}
hr {
margin-top: 10px;
}
* {
padding: 0;
margin: 0;
}
<nav>
<a href="#">
<img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
</a>
<a href="#">
<img src="https://img.icons8.com/material-rounded/16/000000/search.png">
</a>
SPACE & COSMOS
<img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl">
<button>Subscribe</button>
<button>Login</button>
</nav>
<hr>
Learn more about auto margins here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
Here's another flex method you may find useful:
Aligning Three Divs Horizontally Using Flexbox
You may encounter another problem now: Because flex features such as auto margins, justify-content and align-items work by distributing free space, your middle item may not be perfectly centered. See these posts for more details and solutions:
Keep the middle item centered when side items have different widths
Center and right align flexbox elements
I would utilise the space-between option that flex brings with the justify-content property. You have to be careful of the way the code is listed for SEO purposes as opposed to placing anywhere and have the css reposition it all. It should cascade in natural order first.
.flex-thirds {
display: flex;
justify-content: space-between;
}
.flex-thirds .col {
width: 32%;
}
.nytl {
margin: 0 auto;
width: 189px;
height: 26px;
}
<div class="flex-thirds">
<div class="col">
<a href="#"><img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
</a>
<a href="#"><img src="https://img.icons8.com/material-rounded/16/000000/search.png">
</a>
SPACE & COSMOS
</div>
<div class="col">
<img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl">
</div>
<div class="col">
<button>Subscribe</button>
<button>Login</button>
</div>
</div>
You can find more about justify-content here at css-tricks
I am using the CSS framework Bulma (first time), though my question might not be Bulma specific, I thought I'd include that just be clear.
I have a navigation bar that has a centered set of links, but also right-align elements. Here is a screenshot:
You can ignore the fixed leaves on the left. I want to know how I can get the cart and the login button to be right aligned whilst having the other bits centre aligned.
Here is a codepen of what I have tried. I just do not know of the proper way to have the car and the login right aligned. I mean I can position absolute them, but that sounds silly.
HTML CODE
<nav class="navbar is-fixed-top">
Products
Our Story
<div id="logo">Logo placeholder</div>
Blog
Contact Us
</nav>
CSS CODE
nav {
display: flex;
width: 100%;
height: 100px;
align-items: center;
justify-content: center;
}
nav a {
text-decoration: none;
color: #194522;
font-weight: bold;
margin: 0 40px;
display: flex;
align-items: center;
}
nav a:hover {
color: #abcf39;
}
How can I get my navigation like that?
Bulma has two regions in its navbar called navbar-startand navbar-end for control of alignment. Just add an additonal class (in my example: navbar-start--centered) to adapt the "start region" to your needs:
.navbar-start--centered {
flex-grow: 1;
justify-content: center;
}
Here a codepen to play with.
Look at it with a wide viewport - it is desktop only. If you want the start region in the viewports center, you could additionally position the "end region" absolutely.
.navbar-start--centered {
flex-grow: 1;
justify-content: center;
}
<nav class="navbar" role="navigation" aria-label="main navigation">
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start navbar-start--centered">
<a class="navbar-item" href="">Products</a>
<a class="navbar-item" href="">Our Story</a>
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a class="navbar-item" href="">Blog</a>
<a class="navbar-item" href="">Contact Us</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<span class="icon">
<i class="fas fa-shopping-cart"></i>
</span>
<span>Cart</span>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
You can add an empty element to the left (as a placeholder) and one to the right (to hold the links) and set them to be flex:1.
Then use normal flex positioning to set the contents of the second (right) container to be right aligned.
nav {
display: flex;
width: 100%;
height: 100px;
align-items: center;
justify-content: center;
}
nav a {
text-decoration: none;
color: #194522;
font-weight: bold;
margin: 0 40px;
display: flex;
align-items: center;
}
nav a:hover {
color: #abcf39;
}
.nav-container{
display:flex;
flex:1;
justify-content: flex-end;
}
.nav-container a {
margin:0 10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
<nav class="navbar is-fixed-top">
<div class="nav-container"></div>
Products
Our Story
<div id="logo">Logo placeholder</div>
Blog
Contact Us
<div class="nav-container">
🛒
Login
</div>
</nav>