Help with getting nav h1 element on the same line

Hey guys.

I am currently working on a project and I have stumbled across an isuse. I need an h1 element to appear on the same line as horizonal li elements on a top nav bar. I have tried setting display: inline-block and display:inline on the h1 but no luck… I have searched around the web and have found similar things but nothing seems to fix my particular issue… could anyone offer any guidance I am sure it is mega simple and is staring me in the face!? many thanks!

here is my html

<nav>
<div class="nav-left">
</div>

  <!-- menu items to appear top right -->
<div class="nav-right">
  <ul>
    <li class="list">Sign in</li>
    <li class="list">For companies</li>
    <li class="list">Online</li>
    <li class="list">On campus</li>
</div>
</nav>

and here is my css

h1 {
  display: inline;
}
/* Nav right */

  ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;

}

li {
  float: right;
}

.list {
  margin-right: 16px;
}

Hi @tokyolamberth

Have you tried applying display: inline to the ul element, as the default is block and thus will take up a new line and not sit on the same line as the h1.

1 Like

Hi @tokyolamberth
which h1 do you want to display on the same line, there is none in your HTML?
Generally that would best be done with the flex-box property.
Set the parent element of your h1 and ul to display: flex.

1 Like

Apologies I must have chopped that off!!

So this is what I am working with

<div class="nav-left"
<img src="images/ic-logo.svg">
<h1>Colmar Academy</h1>
</div>
  <!-- menu items to appear top right -->
<div class="nav-right">
  <ul>
    <li class="list">Sign in</li>
    <li class="list">For companies</li>
    <li class="list">Online</li>
    <li class="list">On campus</li>
</div>
</nav>

my css

h1 {
display: inline;
}
/* Nav right */

  ul {
  list-style-type: none;
  overflow: hidden;

}

li {
  float: right;

}

.list {
  margin-right: 16px;
}

As you can see on the below screenshot the text isnt aligned with the elements on the right. I really appreciate any help! many thanks

Screenshot 2021-04-23 at 11.28.10

This did it!! Thanks (again) Dom!!!

No worries!

Ultimately I would look into flexbox (like @mirja_t suggested) or css grid as it would simplify a lot of the design challenges you might face. I personally prefer it to things like float.

1 Like

Thank you. I will look into flexbox. Just out of interest - How would I apply flexbox to this particular instance?

You would set the parent container of .nav-left and .nav-right (<nav> in your case) to display: flex.
Then you can play around with flex-grow, flex-shrink and flex-basis as properties for .nav-left and .nav-right.
Here is a useful guide for flex-box Flexbox
(Don’t forget to close the <ul> tag)

1 Like