Portfolio page - header/nav bar help!

Code Feedback
1

Update: Now I’m trying to get the nav bar links and my h4 element to sit within the teal green coloured header, rather than underneath it. Help please! :smiley:

Original:
Apologies for how ugly and early this draft is - I’ve only put the background colours in atm to help me see where the different sections are.

I want to have the three links of my nav bar inline with each other and with the h3 element of my header (but with the h3 on the left and the list of links on the right). I’ve tried making various elements inline but I haven’t been able to find the right combination.

Any tips?

2

Hi i think you’re looking for this

edit… didnt read question properly!

<nav>
        <ul> 
          <li>A coder in training!</li>
          <li><a href="#About">About</a></li>
          <li><a href="#Portfolio">Portfolio</a></li>
          <li><a href="#Contact">Contact</a><li>
      </ul>
      </nav>



nav ul {
      list-style-type: none;
      background-color: #444;
      text-align: center;
      padding: 0;
      margin: 0;
     text-align: left;
  
    }

nav ul li:not(:first-child){
  float: right;
}

nav ul li {
   display: inline-block;
}
1 Like
3

Thanks! I could have sworn I tried that but obviously not :slight_smile:

4

Use the background-color to find the different between each section actually is a very good technique so I recommend you to use it when you are in trouble :smile: but remember to remove it when go into production site :wink:
To have the nav align with your name, the code below should work :smile:
nav{ display: inline-block; } nav ul li { display: inline-block; }

5

Hi,
i just edited my origional answer, missed the bit about title inline

6

Ok update: it seems like my h4 element and nav bar list aren’t actually part of the header behind them.
Suggestions?