Is it possible to have different alignments for list items within a navbar menu?

I have a responsive collapsing navbar menu done in CSS. I'm using the bulma CSS framework to construct my page.

I am trying to have a logo permanently displayed on the left, with the menu list items horizontally centered. I would use the same technique to align the logo left as to align a searchbox on the right.

This is my attempt so far:

body {
    font-family: Helvetica, Arial, sans-serif;
    background-color: rgb(236, 236, 236);
    margin: 0em;
    color: rgb(19, 51, 61);
}

p {
    font-size: 18px;
    line-height: 1.5;
    font-weight: bold;
    color: rgb(51, 51, 51);
    max-width: 55em;
}

p a {
    color: rgb(41, 183, 206);
    text-decoration: none;
}

strong {
    color: rgb(41, 183, 206);
}

nav {
    font-size: 12px;
    background-color: rgb(19, 51, 61);
    box-shadow: 0 1px 2px rgba(19, 51, 61, 0.5);
    padding: 0 1em;
    height: 44px;
    overflow: hidden;
    text-align: center;
}

nav img {
    text-align: left;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    max-height: 88px;
    position: relative;
}

nav li {
    display: inline-block;
}

nav a {
    display: inline-block;
    padding: 0 1em;
    color: rgb(236, 236, 236);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 44px;
    height: 44px;
}

nav a:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

nav li:last-child { 
    position: absolute; 
    right: 0;
    bottom: 44px; 
    background-image: linear-gradient(to right, rgba(19, 51, 61, 0) 0, rgba(19, 51, 61, 1) 2em);
    padding-left: 3em;
}

nav li:nth-last-child(2) { 
    display: none;
}

nav#menu:target {
    height: auto;
    padding: 0;
}

nav#menu:target ul {
    max-height: none;
}

nav#menu:target li {
    display: block;
}

nav#menu:target a {
    display: block;
    padding: 0 2em;
    background-color: rgba(255, 255, 255, 0.05);
}

nav#menu:target a:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

nav#menu:target li:not(:first-child) {
    margin-top: 2px;
}

nav#menu:target li:last-child {
    display: none;
}

nav#menu:target li:nth-last-child(2) {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    border-left: 2px solid rgb(19, 51, 61);
}

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
  </head>
  <body>
<nav id="menu">
    <ul id="menu-closed">
        <li><img src="https://camo.githubusercontent.com/971caf673b2a29c7b6d6af6c74b9d7e649214eb1765bfef0848b68d3ce3a40fb/68747470733a2f2f63646e2e737667706f726e2e636f6d2f6c6f676f732f766974656a732e737667" style="max-height: 44px;"></li>
        <li><a href="#">Test1</a></li>
        <li><a href="#">Test2</a></li>
        <li><a href="#">Test3</a></li>
        <li><a href="#">Test4</a></li>
        <li><a href="#">Test5</a></li>
        <li><a href="#menu-closed">&#215; Close menu</a></li>
        <li><a href="#menu">&#9776; Menu</a></li>
    </ul>
</nav>

I've tried various things, as well as some of bulmas positioning classes, and I can't seem to get it to stick to the left no matter what I do.

What is the correct approach here?

Bonus question: How can I maintain the list elements being vertically centered as they are if the image is removed?

Solution

Set your logo to an absolute position on the left and add equivalent same paddings to the menu list on the left and right.

body {
    font-family: Helvetica, Arial, sans-serif;
    background-color: rgb(236, 236, 236);
    margin: 0em;
    color: rgb(19, 51, 61);
}

p {
    font-size: 18px;
    line-height: 1.5;
    font-weight: bold;
    color: rgb(51, 51, 51);
    max-width: 55em;
}

p a {
    color: rgb(41, 183, 206);
    text-decoration: none;
}

strong {
    color: rgb(41, 183, 206);
}

nav {
    font-size: 12px;
    background-color: rgb(19, 51, 61);
    box-shadow: 0 1px 2px rgba(19, 51, 61, 0.5);
    padding: 0 1em;
    height: 44px;
    overflow: hidden;
    text-align: center;
}

nav img {
    text-align: left;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    max-height: 88px;
    position: relative;
}

nav li {
    display: inline-block;
}

nav a {
    display: inline-block;
    padding: 0 1em;
    color: rgb(236, 236, 236);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 44px;
    height: 44px;
}

nav a:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

nav li:last-child { 
    position: absolute; 
    right: 0;
    bottom: 44px; 
    background-image: linear-gradient(to right, rgba(19, 51, 61, 0) 0, rgba(19, 51, 61, 1) 2em);
    padding-left: 3em;
}

nav li:nth-last-child(2) { 
    display: none;
}

nav#menu:target {
    height: auto;
    padding: 0;
}

nav#menu:target ul {
    max-height: none;
}

nav#menu:target li {
    display: block;
}

nav#menu:target a {
    display: block;
    padding: 0 2em;
    background-color: rgba(255, 255, 255, 0.05);
}

nav#menu:target a:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

nav#menu:target li:not(:first-child) {
    margin-top: 2px;
}

nav#menu:target li:last-child {
    display: none;
}

nav#menu:target li:nth-last-child(2) {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    border-left: 2px solid rgb(19, 51, 61);
}

nav#menu > ul {
  padding-right: 50px;
  padding-left: 50px;
}

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

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
  </head>
  <body>
<nav id="menu">
    <ul id="menu-closed">
        <li class="logo"><img src="https://camo.githubusercontent.com/971caf673b2a29c7b6d6af6c74b9d7e649214eb1765bfef0848b68d3ce3a40fb/68747470733a2f2f63646e2e737667706f726e2e636f6d2f6c6f676f732f766974656a732e737667" style="max-height: 44px;"></li>
        <li><a href="#">Test1</a></li>
        <li><a href="#">Test2</a></li>
        <li><a href="#">Test3</a></li>
        <li><a href="#">Test4</a></li>
        <li><a href="#">Test5</a></li>
        <li><a href="#menu-closed">&#215; Close menu</a></li>
        <li><a href="#menu">&#9776; Menu</a></li>
    </ul>
</nav>