CSS/HTML NavBar responsive-CodePudding

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="#" ></a>
      <a href="#" ></a>
      <a href="#" ></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;
 }

CodePudding user response：

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  href="index.html">
    <h1>Amazing restaurant</h1>
  </a>


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

  <div >
    <a href="#">
      <i ></i>
    </a>
    <a href="#">
      <i ></i>
    </a>
    <a href="#" >
      <i ></i>
    </a>
  </div>
</header>

CodePudding user response：

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 >Amazing restaurant</h1>

      <!-- nav -->
      <nav >
        <li><a  href="#Menu">Menu</a></li>
        <li><a  href="#Reservations">Reservations</a></li>
        <li><a  href="#Special Offers">Special Offers</a></li>
        <li><a  href="#Contact">Contact</a></li>
      </nav>
      <a href="#" ></a>
      <a href="#" ></a>
      <a href="#" ></a>
    </div>
  </header>
</body>

CodePudding user response：

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  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  aria-hidden="true"></span>
        <span >Facebook</span>
      </a>
    </li>
    <li>
      <a href="#Twitter" target="_blank">
        <span  aria-hidden="true"></span>
        <span >Twitter</span>
      </a>
    </li>
    <a href="#Instagram" target="_blank">
    <span  aria-hidden="true"></span>
        <span >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.