CSS css issue with banner element

[bendroid]

Hi everybody,
I've been learning html/css for three month now and I'm creating my first website at the moment (pure css, no js). Now I've run into a pretty strange problem and got totally stuck. It would be so great if someone would be able to find a solution for this issue.

I've created a banner block for the top of my pages, the usual stuff you see everywhere - icon left-aligned, logo text and hamburger navigation menu right-aligned. Then, to make positioning and styling easier I decided to wrap it into a container, so I did and defined a .banner-container class. Unfortunately, the container class styles don't get applied to the correct banner element, instead it creates a second banner element underneath the actual one and targets that one. And I just don't know why. When I change the height value of the banner-container, it changes the height of the red element instead of my actual banner element.

I've put the code in a CodePen, so if someone could check that out and tell me what I've done wrong, that would be so great. Spent a good week now trying to track down the issue without any success. Here's the link to the CodePen:

https://codepen.io/Bendroid23/full/oNmepbM

The red bit is the block I want to get rid of whilst at the same time get the `.banner-container`class to target the correct banner element above, which it doesn't do right now.

From all my trying and changing I assume the css is a total mess now. I would thank you forever if someone could also clean the code up a little, if necessary.

Sorry for my english, if anything is unclear please just ask. Thanks.

 

[Johna]

Hey there.

You are, in fact, changing the height of the banner-container element, because that's what the red block is.
Take a look at the CSS for the banner-container and you'll see that you've added background-color: red; to it.

The element you are trying to resize is the nav element, which is a child of the banner-container element. Now if you want it to resize with the banner-container, you'll have to add height: 100%; to the nav element.
If you do add height: 100%; to the nav element, you will notice it takes the height of the entire page, and that's because you've given it position: fixed; which you really do not need to do because the parent element already has that property.

 

[bendroid]

OMG. Finally an approach to start with, thanks a million times. I was absolutely clueless what else to try. I just don't really understand why .banner-container class does create a new block instead of treating the above nav block as the container element to target, but well... Be it so. I've still got a long way to learn.

Now I've just got to get rid of the rest of the red element, cos after applying your suggested adjustment the red element has shifted to a slim bit on the left side. Do you have any ideas how to remove the red block entirely?

Anyway, for now you really made me happy with hinting me to where to begin with. Thanks again!

Ben

Edit:
I've got to correct myself - your solution is absolutely working and fine. It's indeed my next rule block for another element below the banner which is interfering. As I've stripped down the CodePen to include just the relevant code you can't see it. I might ask for help again in a few days if I don't get it solved by myself.

Bye for now and thank you again for your great support. I can't believe that in the end it was just changing one value. 🙂

 

[Johna]

The red block to the left is the space being taken up by the checkbox.
It seems you're using the checkbox to open/close the menu, but rather than directly checking the checkbox, you click the hamburger icon? If that's the case, then the checkbox doesn't need to be visible so you can just hide it with display: none;

 

[bendroid]

Oh, your up, cool, I assume you're not in Europe then, cos here it's half three in the morning.

Yes, it's a bit of a hack using the checkbox for opening the hamburger, but this way I was able to avoid having to rely on js as this is a pure css project. Maybe a little dirty, but works great.

Thanks for the info, I'll adjust the code tomorrow cos I really got to go to bed now, my alarm clock will be pestering me in four hours. Plus I just messed up my CodePen a little, it doesn't seem to work good on mobile which I am on just now. Well, will clean it up tomorrow. Thanks for your hint again.

Bye,
Ben

 

[Johna]

I'm not in Europe, but it is late here, 1:50am. So I guess it's not only a Dutch thing to say half three, meaning 2:30 rather than 3:30. I always found that confusing lol.

Not that there's anything wrong with using the checkbox, just don't need it visible, and that will get rid of the red block.
That's actually a good way to avoid using JS, I might have to pick that up.

 

[bendroid]

I'm not in Europe, but it is late here, 1:50am. So I guess it's not only a Dutch thing to say half three, meaning 2:30 rather than 3:30. I always found that confusing lol.

Not that there's anything wrong with using the checkbox, just don't need it visible, and that will get rid of the red block.
That's actually a good way to avoid using JS, I might have to pick that up.

Well, I've learnt my English in Scotland 20 years ago, that's how they say it there, but I've also heard it everywhere else. Don't know how they do it in America though, everything is different there.

Regarding the check box hack, I do know people who would go on like it's a dirty hack, don't use it bla bla. I also liked it immediately when I saw it, I didn't invent it myself, picked it up a while ago from some public CodePen.

Anyway, I finished all the issues regarding my banner block today, your hint was the push I needed to get started, that was great. As I said before, I've been tinkering on it for more than a week. But then again, I've started with HTML stuff just three month ago, so my experience is really limited yet. But progressing 🙂