HTML/CSS Bring the navbar text to the center of the screen in CSS

AI Thread Summary
To center the navigation bar from "Home" to "Contact" on the webpage, the suggestion is to use CSS flexbox properties. Specifically, applying `display: flex` and `justify-content: center` is recommended, but it may require adjustments to existing CSS rules. The proposed changes include modifying the class from `margin-left: 25%` to `mx-auto`, which centers the navbar items effectively. This adjustment aligns with the desired layout seen in the reference website. Identifying the CSS rules that facilitate this centering involves focusing on the flexbox properties and ensuring the correct class names are applied to achieve the intended design.
shivajikobardan
Messages
637
Reaction score
54
TL;DR Summary
Bring navbar at center CSS
https://demo.w3layouts.com/demos_ne...a-liberty-demo_Free/2002651968/web/index.html

This is the website that I am trying to build.

This is my current navbar.
fJLX3O3apC1PU0tIIH_EzdnGbwUqeLO7jmg5P_T2pLgmUUVb1Q.png


This is what I want to build.
wN-ub_JJv8XmNqoUbNsD4eCY6JQKuQ-EB2rZ-PJy94XDB9yulA.png

My focus is on "Home" to "Contact". I want to put it at the center of the page like in the second one. My guess was to do display:flex justify-content: center. But it didn't work.
Please guide me how to make it work?

Here's the codepen.
 
Technology news on Phys.org
Increase the value here:
CSS:
.collapse {
  margin-left: 25%;
}

Or, better, remove the previous value and modify the following:
HTML:
<ul class="navbar-nav me-auto  ">
to:
HTML:
<ul class="navbar-nav mx-auto  ">

(That is how it is done in your link)

Can you identify what CSS rules change in this process?
 
Dear Peeps I have posted a few questions about programing on this sectio of the PF forum. I want to ask you veterans how you folks learn program in assembly and about computer architecture for the x86 family. In addition to finish learning C, I am also reading the book From bits to Gates to C and Beyond. In the book, it uses the mini LC3 assembly language. I also have books on assembly programming and computer architecture. The few famous ones i have are Computer Organization and...
I have a quick questions. I am going through a book on C programming on my own. Afterwards, I plan to go through something call data structures and algorithms on my own also in C. I also need to learn C++, Matlab and for personal interest Haskell. For the two topic of data structures and algorithms, I understand there are standard ones across all programming languages. After learning it through C, what would be the biggest issue when trying to implement the same data...

Similar threads

Replies
5
Views
2K
Replies
5
Views
2K
Replies
9
Views
2K
Replies
2
Views
2K
Replies
2
Views
1K
Replies
3
Views
2K
Replies
3
Views
2K
Replies
3
Views
3K
Replies
2
Views
2K
Back
Top