I have created a nav bar using a flexbox. I am satisfied, but I think the nav is a little bit on the right side. How can I move it to the left side so that it should have the same responsiveness as before?
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.header {
width: 100%;
background-color: #f4f4f4;
height: 08rem;
display: flex;
justify-content: space-around;
align-items: center;
-webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
column-gap: 15rem;
}
.nav {
text-transform: uppercase;
font-family: "Lato";
}
.main-nav {
display: flex;
font-size: 2rem;
}
.main-nav__link {
padding: 0rem 1.5rem;
text-decoration: none;
text-align: center;
display: block;
color: #34495e;
}
.main-nav__link:hover {
color: #718daa;
}
.logo {
font-family: "Montserrat";
}
.logo__link {
color: #34495e;
text-transform: uppercase;
letter-spacing: 0.2rem;
font-weight: 700;
text-decoration: none;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
<div class="container">
<header class="header">
<!-- insert logo image -->
<!-- <img src="img/logo.png" alt="Tolani Logo" class="logo"> -->
<!-- or -->
<!-- Use A Logo Image -->
<h1 class="logo"><a href="/" class="logo__link">Tolani Alumni</a></h1>
<nav class="nav">
<ul class="main-nav">
<li class="main-nav-list"><a class="main-nav__link" href="#">Home</a></li>
<li class="main-nav-list"><a class="main-nav__link" href="#">About</a></li>
<li class="main-nav-list"><a class="main-nav__link" href="#">College</a></li>
<li class="main-nav-list"><a class="main-nav__link" href="#">Events</a></li>
<li class="main-nav-list"><a class="main-nav__link" href="#">BOk</a></li>
</ul>
</nav>
<button class="btn btn-login">Login</button>
</header>
</div>
How can I move a flex element to the middle and maintain some of its previous responsiveness
3
Answers
Here are the changes I made:
Added:
type="button"
Moved CSS:
html { box-sizing: border-box; font-size: 62.5%; }
to the top where it cascades betterChanged
ul
in css to.main-nav
since I added this list it was "broken" – use classes not element tag for CSS unless you are developing a "library" like bootstrap or the likeMoved the
.main-nav
CSS all to one place. If you have to have more than one it is likely your CSS needs more workMoved
.nav
and.header
since I prefer top down which is what the C in CSS is about (cascade)Changed
.main-nav__link
and.logo__link
to.main-nav-link
and.logo-link
since I hate underscores in CSS because it it hard to tell how many there are and I dislike mixed dash and underscoresChanged
height: 08rem; to height: 8rem;
because it was more clearRemoved
.main-nav { margin: 0; padding: 0;
since those were already set abovePut
*
, with the others instead of a separate group for no reasonPut
ul.main-nav{ font-size: 0; }
on to deal with margins and put the size on theli.main-nav-list{ font-size: 2rem; }
ref: How to remove the default margin of inline li elements?<h1 class="logo"></h1>
was not showing upSet
font-size: 16px;
on the html andbody { font-size: 0.625em; }
to set your 10px font since most browsers default to 16px size and 10/16 = 0.625Setup a grid with 3 columns and the 8rem height you had
after I set the flex (center) to wrap for small screens
Stripped down and no ul/li example:
This is the part that matters:
Maybe try changing .nav properties to
You can use trial and error to get the desired results. For maintaining responsiveness I would suggest giving it in %.
I have made some minor changes to your code and marked them with comments. Now you can use the gap property of .nav to provide space between the logo and navbar.
Essentially, I have wrapped the logo and nav links within the same container, applied the flex property to it, and added some padding to the header.
You will need to write media queries to make it responsive for other devices.