Why does my ::before control its parent instead of itself

1

Hello, for some reason my #hamburger::before controls #hamburger instead of itself. Here’s the code and a link to codepen.

#hamburger{
    margin-left:0;
    padding:0;
    width: 30px;
    height: 3px;
    background:white;
    display:block;

}
#hamburger::after{
    margin-left:0;
    padding:0;
    width: 30px;
    height: 3px;
    margin-top: 6.7px;
    content:"";
    background:white;
    display:block;

}

#hamburger::before{
    content:"";
    width:30px;
    height: 3px;
    background: white;
    display:block;
    margin-bottom: 15px;
}

https://codepen.io/VeljkoCukic/pen/wvMaONV

2

Hey @veljkocukic,

It’s not really controlling it, It’s On top of it. If you give your :before a position:absolute; then do top: 0px;, then you can see it.

1 Like
4

I tried it and It moved itself:

image
image1009×401 13 KB

Another approach to solve this is to just add another div into the hamburger, then use that as the before and after that div. So have a container for the hamburger and the hamburger div itself.

5

Thanks! Somehow, I didn’t manage to figure it our myself :sweat_smile:
Do you know, perhaps, why my JS is not working now?
https://codepen.io/VeljkoCukic/pen/wvMaONV

6

Hey @veljkocukic,

I’m gonna help you try to debug this yourself, because you’re going to need this skill. Anyways, what do you see wrong in this code screenshot?

image
image406×526 11.7 KB

If you can’t really find it (but I really want you to figure it out yourself):

There are a couple things wrong here:

  • You didn’t have jQuery as a library installed on this codepen. You can do so by pressing the Settings Button beside the text JS, then you’re going to see a search bar that have a text saying Search CDNjs and then just search in jQuery, press the first button.

  • The `.#menu-open will cause some trouble.

  • When you’re using any Classes modifier on jQuery, you don’t need to specify the .(dot) because you’re already telling the code that you’re toggling a class. So ditch the . (dot) on toggleClass function.

1 Like
8

Thanks a lot, I finally made it work!

9

By the way, I have one more question that is not actually related to this topic.
Do I actually need to learn JavaScript for font-end developing or do I just need to learn jQuery?

10

Hello~!

jQuery is an extension of JavaScript. You won’t be able to use jQuery without using JavaScript. :slight_smile:

1 Like
11

As @nhcarrigan said,

jQuery is an library/extension to JavaScript. You have to learn JS first before jQuery. If you want to be front-end developer, you still have to learn JavaScript, because you’re going to make some functions that you need to know to make to make your sites more interactive. So, you do need JavaScript knowledge first, before jQuery.

2 Likes