“position: fixed;’ appears to remove Grid child from the Grid. How to fix?

@Programming_Padawan

Copy linkTweet thisAlerts:

Jan 08.2022

I am a CSS Grid Layout newbie. I have created a top navigation menu bar using CSS Grid Layout. I have placed the menu bar in a 3 column by 1 row grid in the middle grid cell so as to center it.

Next I added “position: fixed;” so as to fix the menu at the top of the browser window. The result is, is it shifts all the way to the left and is fixed to the top. (I want it in the middle.) By what I can tell in the Firefox Developer tools is the menu is being removed from the grid as the grid height becomes zero.

How can I get my menu centered and fixed.

CSS —————————————————————————————————

“`
.nav_bar {
display: grid;
grid-template-columns: 1fr max-content 1fr;
grid-template-rows: max-content;
}

/* Top menu bar */
.nav_bar nav {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: max-content;
/* Placing this grid in the parent grid */
grid-column-start: 2;
grid-column-end: 3;
position: fixed;
}

.nav_bar div{
height: 100%;
text-align: center;
font-size: 18px;
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
}

.nav_bar a {
text-decoration: none;
color: var(–text-color1);
}

.nav_bar .menu_cell {
background-color: var(–primary-color);
color: var(–text-color1);
}

.nav_bar .menu_cell:hover {
transition: all 750ms ease;
background-color: var(–secondary-color);
}
“`

HTML ————————————————————————————

“`
<div class=”primary_grid_con”>
<!– Navigation menu–>
<div class=”nav_bar”>
<nav>
<div class=”menu_cell” id=”menu1″><a href=”#”>Item 0</a></div>
<div class=”menu_cell” id=”menu2″><a href=”#”>Item 1</a></div>
<div class=”menu_cell” id=”menu3″><a href=”#”>Item 2</a></div>
<div class=”menu_cell” id=”menu4″><a href=”#”>Item 3</a></div>
</nav>
</div>
</div>
“`

Also in #CSS _↴