CSS/HTML NavBar responsive

Question

Trying to build somthing unique at least for me. this is what i have so far i am having some issues getting the layout to be right.

What i am trying to do is create an H1 title that will link back to the home page. Underneath the Navbar will be 4 links evenly spaced across the page. Then 3 social media icons under the nav bar. I have all the items there, just confused as i cannot get anything to go right. the nav bar will seemingly fit fine, then i put the social media there and it bunches up on one of the sides. or the nav bar will be center but not spread out evenly even when i put into CSS to spread.

   <header>
    <div>
      <h1>Amazing restaurant</h1>

      <!-- nav -->
      <nav>
        <a href="#Menu">Menu</a>
        <a href="#Reservations">Reservations</a>
        <a href="#Special Offers">Special Offers</a>
        <a href="#Contact">Contact</a>
      </nav>
      <a href="#" class="fa fa-facebook"></a>
      <a href="#" class="fa fa-twitter"></a>
      <a href="#" class="fa fa-instagram"></a>
    </div>
  </header>

   header {
  width: 100%;
  height: 100vh;
  background-image: url("../img/home-header.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
 }
 nav {
 padding: 12px;
 color: white;
 text-decoration: none;
 font-size: 17px;
 width: 25%;
 text-align: center;
 }

i changed the use of LI and removed all together I am sorry i must not have known the use of LI in this scenario. I did attempt to use an orderd list and list item to do it but the scenario is the same, so I used regular Atag for navbar use and the scenario is similar. Thank you for pointing that out. — Sebo88
– Sebo88, Commented Feb 28, 2022 at 18:42

STEPS KEITA · Accepted Answer · 2022-02-28 18:50:01Z

1

Here is a solution to your problem but I advice spending some time learning about flex

header {
  width: 100%;
  height: 100vh;
  background-image: url("../img/home-header.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header .headerTitle {
  text-decoration: none;
  color: black;
  margin-bottom: 25px;
}

header .navLinks {
  padding: 12px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
}

header .navLinks a {
  color: black;
  text-decoration: none;
  font-size: 17px;
  margin-bottom: 15px;
}

header .socialLinks a {
  color: black;
  text-decoration: none;
  font-size: 14px;
  margin: 7px 20px;
}

<header>

  <a class="headerTitle" href="index.html">
    <h1>Amazing restaurant</h1>
  </a>


  <div class="navLinks">
    <a href="#Menu">Menu</a>
    <a href="#Reservations">Reservations</a>
    <a href="#Special Offers">Special Offers</a>
    <a href="#Contact">Contact</a>
  </div>

  <div class="socialLinks">
    <a href="#">
      <i class="fa fa-facebook"></i>
    </a>
    <a href="#">
      <i class="fa fa-twitter"></i>
    </a>
    <a href="#" class="fa fa-instagram">
      <i class="fa fa-instagram"></i>
    </a>
  </div>
</header>

answered Feb 28, 2022 at 18:50

STEPS KEITA

513 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

isherwood Over a year ago

This answer would be better with some explanation. See How to Answer. Also, there's no need to make all your text bold.

isherwood · Accepted Answer · 2022-02-28 19:25:08Z

0

Hi I´m also starting at this and also want to show you the way that could solve the issue that you´re having. Understanding display options is very useful.

html {
  box-sizing: border-box;
}

a,
a:before,
a:after {
  box-sizing: inherit;
}

header {
  width: 100%;
  height: 100vh;
  background-image: url("../img/home-header.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}

.main-nav {
  background-color: lightseagreen;
}

.main-nav li {
  padding: 0.5rem;
  color: white;
  text-decoration: none;
  font-size: 1rem;
  text-align: center;
  display: inline-block;
}

.lis {
  text-decoration: none;
  color: white;
  font-size: 1.5rem;
}

.title {
  color: lightseagreen;
  font-size: 3rem;
}

<body>
  <header>
    <div>
      <h1 class="title">Amazing restaurant</h1>

      <!-- nav -->
      <nav class="main-nav">
        <li><a class="lis" href="#Menu">Menu</a></li>
        <li><a class="lis" href="#Reservations">Reservations</a></li>
        <li><a class="lis" href="#Special Offers">Special Offers</a></li>
        <li><a class="lis" href="#Contact">Contact</a></li>
      </nav>
      <a href="#" class="fa fa-facebook"></a>
      <a href="#" class="fa fa-twitter"></a>
      <a href="#" class="fa fa-instagram"></a>
    </div>
  </header>
</body>

edited Feb 28, 2022 at 19:25

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Feb 28, 2022 at 19:23

DrodriRod

1

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

ouflak · Accepted Answer · 2022-02-28 20:48:57Z

Here is how you can achieve what you are looking for and also make it responsive at the same time. CSS Flexbox and Grid is where CSS starts to get tough and its wise to research multiple frontend instructors who teach it well. I like Wes Bos - he has a CSS Grid and a Flexbox course. They are both free.

If you can afford to spend some money, I really like Front End Masters and I actually learned how to code this NavBar from Jen Kramer in her CSS class. I find creating the NavBar in CodePen or a sandbox like that really helps. Just a couple of pointers of what worked for me.

Now, also to clarify - I have Google fonts for Oxygen and Oxygen mono linked in my header, as well as Font Awesome 5.

/* variables declared here - these are the colors for our pages, as well as the font stacks and sizes. */
:root {
  --black: #171321;
  --dkblue: #0d314b;
  --plum: #4b0d49;
  --hotmag: #ff17e4;
  --magenta: #e310cb;
  --aqua: #86fbfb;
  --white: #f7f8fa;
  --font-size: 1.3rem;
  --mono: "Oxygen mono", monospace;
  --sans: Oxygen, sans-serif;
}
/* border box model: https://css-tricks.com/box-sizing/ */
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
/* generic styles for the page */
body {
  padding: 0;
  margin: 0;
  font-family: var(--sans);
  background-color: var(--black);
  color: var(--white);
  font-size: var(--font-size);
}
h1,
h2,
h3 {
  margin: 0;
}
a {
  color: var(--magenta);
}

a:hover {
  color: var(--hotmag);
  text-decoration: none;
}
/* intro styles */
#intro {
  padding-bottom: 10rem;
}

#intro p {
  font-size: 1rem;
  line-height: 1.5;
}

#intro .name {
  font-family: var(--mono);
  font-size: 1rem;
}

.name span {
  font-family: var(--sans);
  font-size: 4rem;
  color: var(--aqua);
  display: block;
  font-weight: 300;
}

#intro h2 {
  font-size: 4rem;
}

/* contact section */

#contact {
  width: 400px;
  text-align: center;
  margin: 0 auto;
  padding: 3rem 0;
}

#contact p:last-child {
  margin-top: 3rem;
}

/* navigation */
nav {
  font-family: var(--mono);
  font-size: 80%;
  padding: 1rem;
}

nav h1 a {
  font-family: var(--sans);
}

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
nav li:first-child {
  flex-basis: 100%;
  text-align: center;
}
nav [class*="fa-"] {
  font-size: 150%;
  color: var(--aqua);
}
nav h1 [class*="fa-"] {
  font-size: 100%;
  color: var(--aqua);
}
nav a {
  color: white;
  text-decoration: none;
  display: block;
}

nav a:hover,
nav [class*="fa-"]:hover {
  color: var(--magenta);
}

@media (min-width: 850px) {
  nav {
    max-width: 1200px;
    margin: 0 auto;
  }
  nav li:first-child {
    flex-basis: auto;
    text-align: left;
    margin-right: auto;
  }
}

<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 rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Oxygen&family=Oxygen+Mono&display=swap" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
</head>
<!-- instructions in JavaScript block -->
<nav>
  <ul>
    <li>
      <h1>
        <a href="index.html">
          <span class="navHeader" aria-hidden="true"></span>
          <span>Amazing Restaurant</span>
        </a>
      </h1>
    </li>
    <li><a href="#menu">Menu</a></li>
    <li><a href="#reservations">Reservations</a></li>
    <li><a href="#specialoffers">Special Offers</a></li>
    <li><a href="#contact">Contact</a></li>
    <li>
      <a href="#Facebook" target="_blank">
        <span class="fab fa-facebook" aria-hidden="true"></span>
        <span class="sr-only">Facebook</span>
      </a>
    </li>
    <li>
      <a href="#Twitter" target="_blank">
        <span class="fab fa-twitter" aria-hidden="true"></span>
        <span class="sr-only">Twitter</span>
      </a>
    </li>
    <a href="#Instagram" target="_blank">
    <span class="fab fa-instagram" aria-hidden="true"></span>
        <span class="sr-only">Instagram</span>
    </a>
  </ul>
</nav>

Keep playing with the code. Change the colors and margins and play around to see what happens in CodePen or your text editor. The next part is getting it to work with the rest of the page.

Collectives™ on Stack Overflow

CSS/HTML NavBar responsive

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related