Hello,
A new exercise, please find : GitHub - tedjngit/flexbaatz
I wanted to display the menu to the right of the logo called logo_baatz, but I was not successful. I tried reducing the width of each of the 2 items (logobaatz and menu), even with reducing the width it didn’t work.
Any other idea to solve this is welcome,
Tedjcoding
Hey tedjcoding
try to simply move your <div class "logobaatz">:
<div class="logobaatz">
<div class="hdbaatz">
<img src="./resources/images/baatz_logo.jpg" alt="logo-baatz" />
</div>
</div>
below the <nav>:
<nav class="menu">
<ul>
<li>
<a href="index.html">Accueil</a>
</li>
<li>
<a href="materiel.html">Matériel</a>
</li>
<li>
<a href="cimenterie.html">Cimenterie</a>
</li>
<li>
<a href="contact.html">contact</a>
</li>
</ul>
</nav>
Like in this picture:
For a better result however I would suggest to give <div class="contnrhead"> a display: flex with flex-direction: row. Or if you want to learn something interesting display: grid but just for this is overkill.
Does this help? 
Hi, I tried different solutions, unfortunately I did not succeed, I still have the same problem. I am looking at the documentation, it may be a positioning problem. What do you think?
I am looking at the documentation
Always a good thing.
In the image I posted however the issue is solved. Have you done what I suggested?
In deed, I have done what you suggested, without successfull.
Post your new code and a screenshot and we can see where the problem lies 
I made 9 modifications since 3-4 days ==> 9 commits , should I push as I did the first time?
I pushed, and it seems to have worked. Would you have a look?
Post a screenshot, because when I copypaste your code from your github to codepen I see only this:
Is this what you were aiming for? I thought you wanted the logo to the right of the nav menu.
I am really sorry, I tried to add a screenshot, but it does not work. I can send it in pdf by email, if you want. My email is : [email protected]
To upload a picture click on the upload icon in the text editor when you’re writing a reply:
Need to make a break
Alright, so based on these pictures (which are the same, yes?) can you describe what is the problem that you need help with?
The image shows the Baatz logo is above the menu, but I want to have these 2 items side by side and the menu items are displayed vertically instead of horizontally. Therefore in style.css file, I put display: inline-block; then flex-direction: row; It seems to be not enough.
Alright, so, I’ll give you some ideas:
-
create a div, let’s call this parent
-
inside this parent place the
imgand thenav -
Give the parent a
display: flex; flex-direction: row; justify-content: space-between; -
Give the
imgawidthand also aflex-basisequal to that width
Inside the nav you have a ul and inside the ul you have 4 li, What you want now is to have these li on the same line, correct?
- Give the
uladisplay: flex; flex-direction: row; justify-content: space-between;
Theoretically this should be it, try it and come back with the result.
Hi, I modified html and cc files as described in your message, please see the modifications I made : tedjngit/ flexbaatz
The result is still the same :
I think I found where is the issue.
the width of each li is 730 x 18 , to fix this, I have to use flex shrink. I will try it this evening then I will come back to you to inform you.
Great, keep us posted!
Hi, to debug, I used ‘Inspect’. For nav, ul, li, I found the following sizes :
nav : 770 x 72
ul : 770 x 72
li : 730 x 18
a (child 1 : ‘Accueil’) : 49.75 x 17 a (child 2 : ‘Materiel’) : 54.2 x 17
a (child 3 : ‘Cimenterie’) : 71.09 x 17 a (child 4 : ‘Accueil’) : 49.77 x 17
So, I tried several attempts to reduce the width of the nav ul and li elements unfortunately the system did not change the width of these 3 elements I gave.
Have you any idea how can I shrink the width?