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

How to align a logo on the left and navigation on the right using HTML and CSS

I need help to align a logo on the left and navigation on the right using html and css.

I want it to be like this image > enter image description here

I’ve been trying different ways to change my css format and it just wouldn’t work.

Here is my html and css

body
{
    margin: 0;
    padding: 0;
    font-family: Hoefler Text;
    background-color: rgb(233, 245, 248);
}
header{
    margin: 3% 10% 3% 10%;
    padding: 37px 161px;
     align-items: center; 
}
@media screen and { (max-width: 700px)}
    .header {
        width: auto;
        float: none;

 }
 
.main-nav{
    font-family: Hoefler Text;
    font-size: .8rem;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(0, 0, 0);
}
.main-nav li { float: left;}
    
.main-nav li a {
    display:block;
    color:#ffffff;
    text-align: center;
    padding:10px 12px;
    text-decoration: none;
    }

.main-nav li:hover{
    background: #ADD8E6;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>*</title>
    <link rel="stylesheet" href="*">
    <link rel="shortcut icon" href="*"type="image/jpg"> 
</head>
<body>

    <nav class="header">
        <a href='*' ><img src='*' alt='logo'/></a>
       
        <ul class="main-nav">
            <li><a href="*">Home</a></li>
            <li><a href="*"> Education</a></li>
            <li><a href="*"> Experience</a></li>
            <li><a href="*">Projects</a></li>
            <li><a href="*">Contact Me</a></li>
         </ul>
    </nav>
    
</body>
</html>
Tags:

2

Answers


  1. 0

    You would like to make two blocks next to one another. It is possible to use an outside div block to your a and ul blocks and add a display: flex to the CSS. Then the size of your two inner block a and ul can be adjusted using percentage of width.

    An elementary example of code is:

    .top-bar {
  display: flex;
}

.logo {
  width: 20%;
}

.main-nav {
  width: 80%;
}
    <nav class="header">
    <div class="top-bar">
         <a href='*' class="logo"><img src='*' alt='logo'/></a>

         <ul class="main-nav">
              <li><a href="*">Home</a></li>
              <li><a href="*">Education</a></li>
              <li><a href="*">Experience</a></li>
              <li><a href="*">Projects</a></li>
              <li><a href="*">Contact Me</a></li>
         </ul>
     </div>
</nav>

    The same logic can be repeated for the ul block (making it a flex block with inner li blocks).

    Login or Signup to reply.
  2. 0

    To solve this problem and align a logo on the left and links on the right of a nav bar you can use flexbox. Flexbox is preferable to trying to use floats, which is a somewhat antiquated way of doing layouts.

    To accomplish this and make it look a bit nicer and be more semantic, I have modified your HTML slightly and renamed some of your classes. Take a look:

    /* Ensure a better box-sizing model */

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

html {
  box-sizing: border-box;
}

/* Make sure to remove the default margin from the body */

body {
  margin: 0;
}

/* Now the bar itself is called masthead, set the padding and 
   background color */
  
.masthead {
  background-color: rgba(245, 245, 245, 0.9);
  padding: 1.75rem 0;
}

/* Make a container right inside the masthead to limit the max- 
   width of the content */

.masthead > .container {
  max-width: 1140px; /* or any other value you prefer */
  margin: 0 auto; /* to center the container horizontally */
}

/* The <nav> element now called .primary-nav. Set flex and flex 
    properties align-items and justify-content here */

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Rename the <ul> element .nav-links. 
   Set display: flex here too and reset the list styles */
   
.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 
 * Added a class for each nav link. 
 * Set some margin to keep the links away from each other
 */

.nav-links li {
  margin-left: 10px;
}

.nav-links li:first-child {
  margin-left: 0;
}

/* Set the styles on the links. It would probably be better
   to just add a class to all the links and select them that
   way instead though. */
  
.nav-link {
  text-decoration: none;
  color: rgb(0, 53, 128);
  font-size: 1.25rem;
}

/* Create effects for the different link states if you  want.
  hover, focus, active, etc */

.nav-link:hover {
  color: rgb(73, 0, 106);
} 

/* Add a screen-reader only class so that you can make things invisible
 * but still seen by screen readers and web crawlers, so you get the
 * accessibility and SEO benefits of a header for the masthead while
 * still being able to just use a logo.
 */

.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(100%);
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  white-space: nowrap;
}
    <header class="masthead">
  <div class="container">
    <nav class="primary-nav">
      <h1 class="sr-only">Page Name</h1>
      <a href='/'><img src='*' alt='logo'></a>
      <ul class="nav-links">
        <li><a href="home.html" class="nav-link">Home</a></li>
        <li><a href="education.html" class="nav-link">Education</a></li>
        <li><a href="experience.html" class="nav-link">Experience</a></li>
        <li><a href="projects.html" class="nav-link">Projects</a></li>
        <li><a href="contact.html" class="nav-link">Contact Me</a></li>
      </ul>
    </nav>
  </div>
</header>

    You can also check out my CodePen to play around with this example.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search