Space-between nav logo and links

HTML-CSS
1

My page

Hey,

I want my nav logo to be left and the a:links to the right. I can’t use 'space-between- as that creates space between the a:links.

I have the look I wanted by had to add unordered list in order to achieve it and it feels unnecessary.

What’s the easiest way?

Cheers.

#nav-header {
  display: flex;
  align-items: center;
}
#nav-header ul,
#nav-header li {
  display: inline;
  margin-left: auto;
}
</style>

    <nav id="nav-header">
      <a href="#"><img class="header-logo" src="https://i.ibb.co/9gQ2BMM/logo.png" alt="company logo"></a>
      <ul>
        <li><a href="#">one</a></li>
        <li><a href="#">one</a></li>
        <li><a href="#">one</a></li>
    </nav>
2

What you did is the easiest/best way… Pretty much all other ways, like adding a huge margin-right to the logo, or setting position properties, would be hacky.

I’m not sure though why you can’t use space-between on the #nav-header with that markup, that can hardly create spaces between the <li> elements, it only creates space between the logo and the <ul>.

1 Like
3

Thank you,

Is there any syntax difference between having a navbar with only li items and then having one where the image is self contained?

I also remembered the below from a recent book I read, it works of course but one thing I’m trying to learn with CSS/HTML is limit the amount of tags I apply classes/id’s too unless it’s a container.

IMG_0796-1
IMG_0796-11023×904 98.1 KB

4

Try something like this:
HTML

<header>
    <h1 id="title">Your title</h1>
    <nav tabindex="0">
      <ul role="menubar" aria-haspopup="true">
        
        <li role="menuitem" aria-label="menu item 1" class="active">
          <a href="/">menu item 1</a> 
        </li>
        
        <li role="menuitem" aria-label="menu item 2" class="">
          <a href="/">menu item 2</a>
        </li>
        
        <li role="menuitem" aria-label="menu item 3" class="">
          <a href="/">menu item 3</a>
        </li>
        
        <li role="menuitem" aria-label="menu item 4" class="">
          <a href="/">menu item 4</a>
        </li>
        
        <li role="menuitem" aria-label="menu item 5" class="">
          <a href="/">menu item 5</a>
        </li>
        
      </ul>
    </nav>
  </header>

CSS

header {
  position: relative;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  }

#title {
    position: inherit;
    order: 1;
    padding: 0px 0px;
    left-margin: 0px;
   }

nav {
  position: inherit;
  order: 2;
  right-margin: 0px;
  }

ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    }

li {
    margin-left: 10px;
    }

It’s a stripped down version of a layout I’ve used which I think is what you’re getting at?

5

Not sure what you mean by “syntax difference”, the syntax is always the same. You can have a nav element with only a <ul> in it and within all your nav links, or you can have a logo on the left side, and the <ul> with nav links on the right side. The main concern in this case is accessibility. You could build a whole functioning page with only divs and spans, but the tags would be meaningless for a screenreader (or a search engine). So if you have a logo that also serves as a link “back to start page”, you should put it within the nav tags.

I think you worry too much about adding additional divs. It’s unavoidable if you want to build a layout that’s more complex than just stacking everything on top of each other. You have to group elements to style them, and to place them where you want them to be. It’s not dirty code, often it’s just the only way to achieve the look you want. Just be conscious about tags with semantic meaning like <nav>, <main>, <footer>. As for divs - it doesn’t matter.

Maybe go to a page you often use and that’s super popular like amazon or airbnb. Inspect their HTML and see for yourself how many nested container-divs they use for their layouts.

1 Like
6

Thanks, this has really helped clear several things up! Appreciate your time. :slight_smile:

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.