Personal portfolio header layout issue

Personal portfolio header layout issue
0

#1

Hi there,

I’d be really grateful with an issue with the small owl icon in my yellow header bar on my portfolio page. I’d like it to line up with the left hand edge of my main container in the centre.

The nav bar had the class of nav-bar container and styled to ‘flex end’ which seemed to get it in about right position.
I tried same with my owl img and gave it .owl container with ‘flex start’ and it really didn’t work!

Came out a bit from the left hand side but shunted the nav bar over to the right! I find flex properties a bit confusing as I’m so new to it!

If anyone can see what’s going on that be great…

Thanks :slight_smile:


#2

one way is…
wrap your ‘owl’ and ‘.nav-bar’ inside ‘.container’

html
<div class="header">
  <div class="container">
    <div class="owl"></div>
    <div class="nav-bar"></div>
  </div>
</div>

css

.header .container {background-color: initial;}
.header .owl {position: absolute;}

#3

Hi there,

Thank you so much for this advice! I’m just embarking on a bit of a rewrite to understand these concepts better so I’ll be including these :slight_smile:
Really appreciated.