The logo positioned on the left with menu links perfectly centered

Looking for Help with Navigation Layout

Greetings. I am encountering some challenges while trying to code the navigation layout depicted in the image (linked above). My goal is to have the logo, which is an image, aligned on the left side and the menu links centered. How can this be achieved through CSS?

Here is the relevant HTML snippet:

    <header id="header">
        <div class="img">
            <a href="landingpage.html"><img src="/logo.png" alt="image of the logo" id="header-img" width="175px" height="52px"></a>
        </div>
        
        <nav id="nav-bar">
            <ul id="menu">
                <li><a class="nav-link" href="#menu1">menu1</a></li>
                <li><a class="nav-link" href="#menu2">menu2</a></li>
                <li><a class="nav-link" href="#menu3">menu3</a></li>   
            </ul>
        </nav>
    </header>

Should any adjustments be made to the HTML structure beforehand?

Your assistance will be greatly appreciated!

cssmenunavigationnavbarnav

Answer №1

The main concept revolves around center aligning everything, while strategically moving the logo out of the flow to the left. It is crucial to consider media queries for small screens.

Updated:

#header {
  display:flex; 
  justify-content: center; /* center everything */
  align-items: center;
  margin-top: 20px;
  padding: 0 260px; /* prevent logo crawling */
}

.img{
  position: absolute; /* remove logo from the flow */
  left: 20px;   /* shift logo to left */
  height: 48px;
  width: 100px;
}

#nav-bar > ul {
  display:flex; /* create a horizontal menu */
  gap: 20px;    /* space between menu items */
  list-style: none;
  padding-left: 0px;
}

.img, #nav-bar > ul > li {
  border: 1px solid gray;
  padding: 5px;
}
<header id="header">
    <div class="img">
        <a href="landingpage.html"><img src="/logo.png" alt="image of the logo" id="header-img" width="175px" height="52px"></a>
    </div>

    <nav id="nav-bar">
        <ul id="menu">
            <li><a class="nav-link" href="#menu1">menu1</a></li>
            <li><a class="nav-link" href="#menu2">menu2</a></li>
            <li><a class="nav-link" href="#menu3">menu3</a></li>   
        </ul>
    </nav>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis, ducimus earum. Perferendis, neque quasi praesentium tempore at laudantium omnis modi sunt. Tenetur cum dolor magnam praesentium iusto illo, delectus doloribus?</p>

Previous:

#header {
  display:flex;
  justify-content: center;
}

.img{
  position: absolute;
  left: 0; 
}

#nav-bar{
  align-self:center;
}
   <header id="header">
        <div class="img">
            <a href="landingpage.html"><img src="/logo.png" alt="image of the logo" id="header-img" width="175px" height="52px"></a>
        </div>
        
        <nav id="nav-bar">
            <ul id="menu">
                <li><a class="nav-link" href="#menu1">menu1</a></li>
                <li><a class="nav-link" href="#menu2">menu2</a></li>
                <li><a class="nav-link" href="#menu3">menu3</a></li>   
            </ul>
        </nav>
    </header>

Answer №2

Feel free to experiment with this suggested layout and tweak it to suit your specific style preferences. By following these instructions, you can achieve the desired layout you had in mind.

 <header id="header">
  <div class="container-1">
    <a href="landingpage.html"
      ><img
        src="https://picsum.photos/200"
        alt="logo image"
        id="header-img"
        width="175px"
        height="52px"
    /></a>
  </div>
  <div class="container-2">
    <ul id="menu">
      <li class="menu-item">
        <a class="nav-link" href="#menu1">menu1</a>
      </li>
      <li class="menu-item">
        <a class="nav-link" href="#menu2">menu2</a>
      </li>
      <li class="menu-item">
        <a class="nav-link" href="#menu3">menu3</a>
      </li>
    </ul>
  </div>
</header>

The CSS code below complements the HTML structure provided:

#menu {
     text-decoration: none;
     list-style: none;
     margin: 0;
     padding-inline-start: 0;
    }
 .container-1 {
    display: inline-block;
   }
  .container-2 {
   text-align: center;
   display: inline-block;
   width: calc(100% - 200px);
  }
  .menu-item {
    display: inline-block;
    padding: 1rem;
   }

Give this layout a try and feel free to customize it further to meet your needs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjustable textarea with automatic height based on content and line breaks

Imagine you have a textarea with text that includes line breaks. If you style it like this: textarea { height: auto; overflow: hidden; resize: none; } Upon loading the page, the textarea will only adjust its height based on the content until it enc ...

javascripthtmlcss

Margin of Google Pie Chart division

Struggling to eliminate a mysterious margin from a div generated by Google Charts, despite no defined margins in the code that could be causing it. Below is a visual representation of the problematic div: div with unidentified margin Any assistance on t ...

htmlcss

Steps to show submenus upon hovering over the main menu items

I am trying to create a vertical menu with multiple levels using HTML and CSS. Here is the code I have written so far: <ul> <li>Level 1 menu <ul> <li>Level 2 item</li> <li>Level 2 item</li&g ...

javascripthtmlcss

Tips for embedding HTML/CSS snippets in backticks when using TypeScript with AngularJS

Does anyone else experience the issue of their Angular 2 templates showing up as gray text in Visual Studio Code? I'm unable to use autocomplete or see my CSS properly. Is this a settings problem or is there a plugin that can solve this? BTW, I am us ...

htmlcssangularjstypescriptbackticks

"Utilizing Bootstrap CSS along with a variety of other CSS/HTML component bundles

Recently diving into the world of Bootstrap for my ASP.NET MVC project has been a game-changer! I'm in awe of its capabilities and functionality. However, I can't help but wish there were more ready-to-use components available to streamline the d ...

htmlcsstwitter-bootstrapkickstrap

List that spans the entire width of the browser, with text limited to a maximum width

I've encountered an issue with a full-width list in my browser. It has a background color that changes when hovered over. However, I want the text within each li element to have left-aligned alignment, a maximum width, and equal left and right margins ...

htmlcss

Stop cascading styles when using nested rules in LESS to prevent unintended style application

In the process of developing a sophisticated front-end system using plugins, we are exploring different methods for composing CSS rules. Currently, we are considering two main approaches: Including parents in the class name Nesting parents in the selecto ...

htmlcssless

The material UI tabs text is missing the ellipses due to a coding error

As a newcomer to web development, I am experimenting with adding an ellipsis to the span element within the tabs. <div class="MuiTabs-scroller MuiTabs-fixed" role="tablist" style="overflow: hidden;"> <div class="MuiTabs-flexContainer"> ...

cssreactjsmaterial-ui

Getting rid of the standard border around images

I've been searching for a while now, but I can't seem to find a solution to fix this specific issue. On a webpage, I have an image (<img...>) that, when it loads, shows a 1px solid white (or very light grey) outline or border on the outermo ...

htmlcss

Using unicode characters to style your Angular application

Hey there! I have an Angular 5 app on StackBlitz that implements table sorting. You can check it out here: https://stackblitz.com/edit/angular-rxdzom. The code for this app is based on the example from . In the app, I've used a stylesheet at ./app/sor ...

cssangular

The component I created seems to be having trouble recognizing the Slickr CSS that was

I have included Sick carousel's CSS in the root component by importing it like this: import React from 'react' import PropTypes from 'prop-types' import { ThemeProvider } from 'styled-components' import { ...

cssreactjsnext.jsslick.jsreact-slick

What are some ways to maintain the aspect ratio of an image with two dimensions?

Issue: The image is taller than the img-box container https://i.stack.imgur.com/zDBLM.png I have identified two potential solutions, but I am not satisfied with them: Removing the img-box wrapper Applying max-height and max-width properties to the img t ...

css

Is there a way to create an input field that accepts only numbers and behaves like a password field simultaneously?

I am attempting to develop an input field for entering a PIN. I would like the PIN to be masked on mobile devices, similar to how passwords are obscured in password input fields. I came across a suggestion on stackoverflow regarding this, but unfortunately ...

javascripthtmlcss

Ways to implement a personalized button in place of jquery ui buttons

Is there a way to replace the standard jQuery dialog buttons with custom images? I have created new buttons in Photoshop with a .png extension and would like to use them instead of the default dialog buttons. I think this can be done through CSS, but if y ...

jquerycssjquery-dialog

Differences in CSS between IE10 and Chrome are causing compatibility issues

Website in question: What is causing the difference in display between IE 10 and other browsers? The website appears to function correctly on Chrome: IE 10: ...

cssinternet-explorerinternet-explorer-10

Guide to making a sliding animation appear when hovering over a menu using jQuery

I have noticed a common feature on many websites, but I am unsure of how to explain it. At times, there are sliding elements in the navigation, like an arrow under menu items that moves when the user hovers over different links. Here is an example of a s ...

javascriptjquerycssnavigationjquery-animate

The hover feature on my website is making the picture flicker

I am experiencing an issue with a map on my website that contains four colored squares. When I hover over one of the squares, the image of the map changes to show the route corresponding to that color. However, this causes the image to shift position and i ...

javascripthtmljquerycss

Adjusting the color of text based on the fulfillment of a condition

Is there a way to change the text color of a variable based on its value in PHP? For example, if the $status is set to admin, can we display it in red when echoed out using <h3>Status: <?php echo $status; ?></h3>? I'm not quite sure ...

phphtmlcss

Steps for making a button with both an image and text:

I am in the process of designing a basketball-themed website and I am looking to incorporate custom icons/buttons that link to various pages on the site. My vision is to have a unique button that features a circular image with accompanying text below it. ...

htmlcss

Adding Multiple CSS Classes to an HTML Element using jQuery's addClass Feature

Take a look at this HTML code snippet: <html> <head> <style type="text/css"> tr.Class1 { background-color: Blue; } .Class2 { background-color: Red; } </style> </head> <body> < ...

jqueryhtmlcss