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

Question

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>

Leave a Comment Cancel Reply