Centering a Navbar?

HTML & CSS
1

I’m attaching photos of where my Navbar is now, and my intended layout in Illustrator. I am also attaching my unfinished code. The problem that I am having is the logo to the left of the nav list is pushing the navbar to the right. I wanted someone’s opinion on the best way to approach this layout from a modern responsive point of view. The main image will eventually be an After Effects or Animate movie but I haven’t added any responsive code yet either. Should I put the header section into a 3 column grid container like this

.grid-container {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr;
 grid-template-areas: ". . ." ". . .";
}

Or use flex or something else?

amgridb
amgridb1920×1080 190 KB

amgrid
amgrid1920×1080 319 KB

index.html (1.0 KB)

amstyle.css (1.5 KB)

2

Unfortunately CSS doesn;t manage this design concept very well and there is no automatic way to make this happen (not even with grid). Generally you would ensure that the left side of the line is padded out with the same amount of content as you have on the right side of the line but as I mentioned in the other thread is a bit of a magic number fix.

Alternatively absolutely place the logo to the left of the navbar so that it doesn’t affect the centering and then use a media query to change the design once something starts to overlap. Again this is not a perfect solution but sometimes designers draw things that aren’t viable codewise. Not everything is possible without some drawback.

If you are feeling adventurous then I did solve this problem a while ago but is not for the faint-hearted and needs a good grasp of CSS to understand what’s going on.

The easiest solution is to absolutely place the logo and then use a media query for smaller screens just before an overlap occurs.

3

Is the padding approach what the Nike site designer used. I see they used flexible containers I think at nike.com. Display Flex ads extra centering capabilities when resizing? Their logo is also positioned all the way to the left maybe with some padding.

amgridc
amgridc1920×1080 322 KB

4

I’m also more of a graohic designer at this point then an expert in CSS. I’m trying to figure out the best methods for handling certain tasks like a grid

.header {
    
    font-family: sans-serif;
    word-spacing: .5em;
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 25% 50% 25%;
    height: 190px;
    width: 100;
}



.subelement-1 {

    
    
}

.subelement-2 {

   
 
}

.subelement-3 {

    
    
}
.subelement-4 {
    
   

}

.subelement-5 {


}

.subelement-6 {
   
}

Or I rather use Flex actually because I noticed that it is difficult to get the 2nd grid row to span the length of 3 columns

.flexcontainer {
    
    display: flex;
    width: 100%;
    margin: auto;
     
    
}


.flex-item1 {
 border: 1px solid blue;
 background-color: aqua;
 

   
}


.flex-item2 {
 border: 1px solid blue;
 background-color: aqua;
 width: 50%;


   
}

.flex-item3 {
 border: 1px solid blue;
 background-color: aqua;
 width: 25%;

   
}

.flex-item4 {
 border: 1px solid blue;
 background-color: aqua;
 

   
}


.flex-item5 {
 border: 1px solid blue;
 background-color: aqua;
 width: 50%;
 

   
}

.flex-item6 {
 border: 1px solid blue;
 background-color: aqua;


   
}

What is the easiest way to rewrite this Flex code to have 2, 3 column rows, or a 3 column row on top of a 1 column row within the same container if possible?

5

No they absolutely positioned the Nike log to the left and absolutely positioned the search input to the right thus allowing the navbar to center in the whole width irrespective of those other elements. This was one approach I mentioned in my post that was easiest to manage but not automatic (unlike my demo).

Nike don’t use flex at all and are using inline-block for the centering.

No it’s absolutely placed into position as mentioned above.

Display flex adds a number of extra capabilities depending on the situation. It does have certain wrapping behaviors and can of course align things horizontally and vertically if required but won’t align an element to the center of the viewport if there are elements aligned left and right. It just centers in the available space.

I’d need to see exactly what you wanted to achieve but generally if you want to align horizontally then you can use flex but if you need rows and columns aligned then you need grid.

With flex you need to learn about the flex properties (flex-grow, flex-shrink, flex-basis) in order to make elements grow and shrink as required.

You may find this old pen of mine useful but I suggest you take a little time and experiment with flex before you try using it.

2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.