Centering horizontal menu - GO FOR FLEXBOX (yes it's allowed :)

Centering horizontal menu - GO FOR FLEXBOX (yes it's allowed :)
0

#1

Hello,

I’ve been working on my portfolio and I can’t find the way to center my menu (that is, I have three tabs in that menu and I want them evenly distributed across the width of the navbar).

I’ve googled a lot and tried every solution I’ve read but none of them works.

I’m sure I’m missing something obvious and I’d really like to understand how to solve that problem.

You can see my project my portfolio .

Any help would be appreciated - although I’ve had the problem on Github that somebody mentioned me and…I couldn’t find their message to answer back! Yep, I’ve said it: noob.


#2

Can you clarify a bit? You say you want a centered menu
(I’m thinking this):

but you say you want them evenly distributed across the width of the navbar
(I’m thinking this):


#3

Hi there, that’s a good point. Honestly any of those two solutions would be fine but it’s true I had the first one in mind - my bad.

I just don’t understand why any of what I’ve found on StackOverflow and the like doesn’t work for me.
Also centering a navbar should be straightforward and I’m already stuck!

Now I’m considering trying with a CSS grid but I feel it would be going round the problem and not solving it.


#4

There doesn’t seem to be a Bootstrap way to center contents in a navbar (other than using columns and offseting them). But it’s relatively easy to do that with flexbox. Here’s a link to get started:


#5

Thank you !

I sort of assumed that because it was a navbar it had to be “treated” accordingly (I mean using Flexbox for example would be sort of inappropriate). Now on for another x hours trying to fix it!

Thanks again!


#6

OH MY GOD !!! It worked !!
I feel very silly now …THANK YOU :slight_smile:


#7

I got a bit late I think. But actually it is possible using CSS only just check out my Old portfolio. Of course I used Bootstrap

Here


#8

Yes, you managed it and yet I don’t understand how it works for you and not for me…

I don’t know if it matters but I’ve noticed a lot of !important in your code, so is it that you’re forcing the browser to do things it wouldn’t normally do…and is what I missed?

I don’t know, I’m curious so I’ll fork my portfolio and try your code to see what it changes.

Thanks for your reply though, I like the animation on onload and the pictures are nicely presented.


#9

I used !important just to prioritize the styles I wanted. As I was using Bootstrap so to avoid conflicts I used that Important declaration. For a side note you can also have a look at my new Portfolio if you would like some inspiration maybe. :slight_smile: Any ideas are welcomed as well.

New portfolio

Source Code


#10

wow I’m impressed !!!

I’m also puzzled, you show projects that come later in the curriculum and yet you are doing the portfolio - is it an update on your first project?

Look, I’m a newbie and have no talent at designing …I was surprised at the blue color after the first page which is rather greenish. Not necessarily bad but puzzling. .

Also I love the blinking arrow but I felt I was expecting it in later “pages” as well - is it something you can repeat?

I’m off for the evening (shame, I’d rather continue working)


#11

Actually I was half way through the projects section and suddenly the curriculum got an update and Portfolio came before the other projects. So actually I did the portfolio after doing some other projects first.

Let’s talk about that greenish thing. Actually it’s just a welcome screen so I wanted it to be refreshing. And yeah the arrow can be added on other sections as well but I left it for the sake of Navbar that is always on top to help navigate through site.


#12

Fair enough ! Actually I find the blue color you’ve put in the rest of the site even more refreshing, especially in contrast with the green.

Good luck with the rest - and thanks again, looking at your github made me understand what github was about :smile:


#13

Glad to know you learned something from my post. :slight_smile: Good luck and keep on coding.