do you think that it’s possible to combine position relative and position fixed on the same element?

It is possible to use flexbox layout. If it is used, then it will be simple to make columns to be set like row. And then there will be no need to use absolute positioning. In addition, your unordered list can be responsive, if we use flexbox layout. So the code would look like this:

.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

.container {
display: flex;
flex-direction: row;
background-color: rgba(0, 0, 0, 0.6);
height: 110px;
}

.left {
flex-basis: 50%;
}

header h1 {
margin: 3px;
color: white;
font-size: 55px;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, Georgia, sans-serif;
}

header p {
color: white;
font-size: 25px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
margin: 0px;
padding: 0px 0px 0px 95px;
}

.right {
flex: 1;
align-self: center;
}

li {
display: inline;
border: 1px solid white;
font-size: 15px;
padding: 10px;
margin: 5px;
color: white
}

.horizontal-list {
display: flex;
flex-flow: row wrap;
}

.list-item {
border: 1px solid white;
font-size: 15px;
padding: 10px;
margin: 5px;
color: white;
}

.order-1 {
order: 1;
}

.order-2 {
order: 2;
}

.order-3 {
order: 3;
}

.order-4 {
order: 4;
}
<div class="navbar">
<div class="container">
    <div class="left">
        <header>
          <h1>Joana Bonvalot</h1>
          <p>Artista - Pintora Clássica<p>
        </header>
    </div>

    <div  class="right">
        <div class="horizontal-list">
            <div class="list-item order-1">
               <a href="HomePage.html">Página Inicial</a>
            </div>
            <div class="list-item order-2">
                <a href="Galeria.html">Galeria</a>
            </div>
            <div class="list-item order-3">
               <a href="Encomendas.html">Encomendas</a>
            </div>
            <div class="list-item order-4">Contactos</div>
        </div>
    </div>
</div>
</div>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top