Why isnt my "navbar" showing?

Good Morning all !

I decided to make the larger screens more appealing by adding sidebars to the screen… and of course that is when things started to go sideways… It seems I am now missing my nav bar but can not figure our where it went ?

Here is the link to the code :

Thanks in advance.

your “nav ul” settings are the cause. Comment that section out and you will see the menu.

(You will need to work thru the settings in nav ul one by one to see what they do)

Everything’s fine except one mistake, just add “top: 0” and “left: 0” and remove “text-align: center”

nav ul {
position: fixed;
width: 100%;
background-color: #22bcbc;
top: 0;
right: 0;

Note: When you make some element as “Fixed”, it will take the entire width of the page, so to make the elements visible, you add these properties "top and left"to 0 so that they hang onto the top of the page.
They also stick to their position when we scroll.

First, thank you for your reply. I appreciate your taking the time to respond.

I have made the changes you suggested, however, there is overflow from the Nav bar that goes behind the right hand sidebar ?

Thank you also for your reply,

I went through the nav-UL section of the css and as you stated I removed each one. removing the Position:fixed did allow the menu to show, but unfortunately as it is… I t is partially hidden by the box instead of flexing(shrinking) to fit box as intended…

This has been a challenge for me in Flex when things go out of their intended containers… those children need a time out LOL

Thank you !

glad to hear you’re on track to finding a solution

Thanks, but I still dont quite have a handle on why it is that the nav toolbar wont stay within the confines of the center div ? I thought originally that the issue was that the nav-bar was not in its own div… I put it in one and it still does not fit … suggestions ?

in theory , you can move elements anywhere in the page (it’s annoying but true). I’m going to take a look at your pen to see what may be happening now. I think it would help though for debugging if you put borders around everything so it is more clear what the issue is.

I did turn the background color for it a flaming red LOL… At one point I had a red border around it… but if it will help I will be glad to stick in borders…

I stuck borders in however, I believe now that the issue may be with the sidebars, that have the same class #box and IDs that are either "left " or "right and given the attributes of " Position: fixed " and a Right:0 or left:0 depending on the side

do you have a new pen? The old pen doesn’t have anything red in it.

no I took out the red and added a border.

so it looks like the width of the header is the issue now. It is too long and gets hidden underneath the rightSideBar element.
So a possible solution is to make a grid for your body and put the left and right side bars on the two respective colums of the grid, with everything else between.

Hi @BrBearOFS

You have made the two sidebars as "fixed" , hence the contents in the middle will go below the sidebars and will take full width of the page, and the sidebars sit on top of the middle content.

You have given the the class as

.header {
 position: fixed;

now just add some code to that class

.header {
 position: fixed;
 z-index: 1;
 justify-content: center;

You need not have "flex-flow: row wrap" , because the default behaviour is row, so you can remove that out.
Now you can remove everything inside "nav ul { }"

Thank you Sujith !

That was what I was looking for … I had completely forgotten about z-index. and knew there had to be a way to make that happen !

I appreciate the help Thank you !


1 Like

Thank you for your help ! Looks like the Z-index was the trick I was looking for… I greatly appreciate your time in helping me sort things out !

THank you !