Question 108408 in Html Question posted in
Some basic documentation can be found here.

Html – How can I move a flex element to the middle and maintain some of its previous responsiveness

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

Tags:

3

Answers


  1. 0

    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 better

    • Changed 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 like

    • Moved the .main-nav CSS all to one place. If you have to have more than one it is likely your CSS needs more work

    • Moved .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 underscores

    • Changed height: 08rem; to height: 8rem; because it was more clear

    • Removed .main-nav { margin: 0; padding: 0; since those were already set above

    • Put *, with the others instead of a separate group for no reason

    • Put ul.main-nav{ font-size: 0; } on to deal with margins and put the size on the li.main-nav-list{ font-size: 2rem; } ref: How to remove the default margin of inline li elements?

    • <h1 class="logo"></h1> was not showing up

    • Set font-size: 16px; on the html and body { font-size: 0.625em; } to set your 10px font since most browsers default to 16px size and 10/16 = 0.625

    • Setup a grid with 3 columns and the 8rem height you had

      header.header {
    display: grid;
    grid-template-columns: 5.5rem auto 5.5rem;
    grid-template-rows: 8rem;
    align-items: center;
    gap: 1em;
    padding-left: 1rem;
    padding-right:1rem;
}

      after I set the flex (center) to wrap for small screens

    html {
  box-sizing: border-box;
  font-size: 16px;
}

body {
  font-size: 0.625em;
  margin: 0;
  padding: 0;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

.container {
  border: solid 1px red;
  width: 100vw;
}

header.header {
  display: grid;
  grid-template-columns: 5.5rem auto 5.5rem;
  grid-template-rows: 8rem;
  align-items: center;
  gap: 1em;
  padding-left: 1rem;
  padding-right: 1rem;
}

.header {
  background-color: #f4f4f4;
  -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;
}

.nav {
  text-transform: uppercase;
  font-family: "Lato";
}

.main-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

ul.main-nav {
  list-style: none;
  font-size: 0;
}

.main-nav li.main-nav-list {
  font-size: 2rem;
  border: 1px solid green;
}

.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>.logo-link {
  color: #34495e;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-weight: 700;
  text-decoration: none;
}


/* not part of your CSS below here */

.body-container {
  width: 100%;
  padding: 2rem;
  font-size: 1rem;
  border: solid 1px blue;
  background-color: #0080FF11;
}
.body-container li{
border: 1px solid #808080;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}

.body-container code {
  background-color: #E0E0E0;
}
    <div class="container">
  <header class="header">
    <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" type="button">Login</button>
  </header>
</div>
<div class="body-container">
  <ul>
    <li>Added: <code>type="button"</code></li>
    <li>Moved CSS: <code>html { box-sizing: border-box; font-size: 62.5%; }</code> to the top where it cascades better </li>
    <li>Changed <code>ul</code> in css to <code>.main-nav</code> since I added this list it was "broken" - use classes not elment tag for CSS unless you are developing a "library" like bootstrap or the like</li>
    <li>Moved the <code>.main-nav</code> CSS all to one plac. If you have to have more than one it is likely your CSS needs more work</li>
    <li>Moved <code>.nav</code> and <code>.header</code> since I prefer top down which is what the C in CSS is about (cascade)</li>
    <li>Changed <code>.main-nav__link</code> and <code>.logo__link</code> to <code>.main-nav-link</code> and <code>.logo-link</code> since I hate underscores in CSS because it it hard to tell how many there are and I dislike mixed dash and underscores</li>
    <li>Changed <code>height: 08rem;</code> to <code>height: 8rem;</code> because it was more clear</li>
    <li>Removed <code>.main-nav {
  margin: 0;
  padding: 0;</code> since those were already set above</li>
    <li>Put <code>*,</code> with the others instead of a separate group for no reason</li>
    <li>Put <code>ul.main-nav{
  font-size: 0;
}</code> on to deal with margins and put the size on the<code>li.main-nav-list{
  font-size: 2rem;
  }</code> ref: https://stackoverflow.com/q/20805028/125981
      <li><code>&lt;h1 class="logo">&lt;/h1></code> was not showing up</li>
      <li>Set <code>  font-size: 16px;</code> on the html and <code>body {
  font-size: 0.625em;
}</code> to set your 10px font since most browsers default to 16px size and <code>10/16 = 0.625</code></li>
      <li>Setup a grid with 3 columns and the 8rem height you had
        <pre>header.header {
  display: grid;
  grid-template-columns: 5.5rem auto 5.5rem;
  grid-template-rows: 8rem;
  align-items: center;
  gap: 1em;
  padding-left: 1rem;
  padding-right:1rem;
}
</pre> after I set the flex (center) to wrap for small screens</li>
  </ul>
</div>

    Stripped down and no ul/li example:
    This is the part that matters:

    header.header {
  display: grid;
  grid-template-columns: 1rem 5.5rem auto 5.5rem 1rem;
  grid-template-rows: 8rem;
  align-items: center;
  gap: 1em;
}

    body {
  box-sizing: border-box;
  font-size: 16px;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

.container {
  width: 100vw;
  background-color: #f4f4f4;
}

header.header {
  display: grid;
  grid-template-columns: 1rem 5.5rem auto 5.5rem 1rem;
  grid-template-rows: 8rem;
  align-items: center;
  gap: 1em;
}

header.header {
  /* same selector as prior but just the visual style parts */
  text-transform: uppercase;
  -webkit-box-shadow: 0 0 0.875em 0 rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0 0 0.875em 0 rgba(0, 0, 0, 0.75);
  box-shadow: 0 0 0.875em 0 rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 0.33em;
  -moz-border-radius: 0.33em;
  border-radius: 0.33em;
}

.logo {
  grid-column: 2;
  font-family: "Montserrat";
}

.nav {
  grid-column: 3;
  font-family: "Lato";
}

.btn.btn-login {
  /* not really needed but here to be consistent */
  grid-column: 4;
}

.logo>.logo-link {
  color: #34495e;
  font-weight: 700;
  text-decoration: none;
}

.nav .main-nav {
  font-size: 1.5em;
  display: flex;
  gap: 0.5em;
  justify-content: center;
  flex-wrap: wrap;
}

.nav .main-nav .main-nav-link {
  text-decoration: none;
  color: #34495e;
}

nav .main-nav .main-nav-link:hover {
  color: #718daa;
}
    <div class="container">
  <header class="header">
    <div class="logo"><a href="/" class="logo-link">Tolani Alumni</a></div>
    <nav class="nav">
      <div class="main-nav">
        <div class="main-nav-list"><a class="main-nav-link" href="#">Home</a></div>
        <div class="main-nav-list"><a class="main-nav-link" href="#">About</a></div>
        <div class="main-nav-list"><a class="main-nav-link" href="#">College</a></div>
        <div class="main-nav-list"><a class="main-nav-link" href="#">Events</a></div>
        <div class="main-nav-list"><a class="main-nav-link" href="#">BOk</a></div>
      </div>
    </nav>
    <button class="btn btn-login" type="button">Login</button>
  </header>
</div>
    Login or Signup to reply.
  2. 0

    Maybe try changing .nav properties to

    1. position: absolute;
    2. left: 4%;
      You can use trial and error to get the desired results. For maintaining responsiveness I would suggest giving it in %.
    Login or Signup to reply.
  3. 0

    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.

    * {
  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%;
  padding-left: 4rem; /* left padding added */
  padding-right: 4rem;  /* right padding added */
  background-color: #f4f4f4;
  height: 08rem;
  display: flex;
  justify-content: space-between;  /* space-around changed to space-between */
  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";
  display: flex;    /* making the nav container flex */
  gap: 5rem;        /* adding gap of 5rem between logo and nav */
  align-items: center;  
}

.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 -->
    <!-- wrapping logo in nav -->
    <nav class="nav">
    <h1 class="logo"><a href="/" class="logo__link">Tolani Alumni</a></h1>


      <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search