-1

I am creating a mobile menu and the image of the hamburger menu button I want to resize the image. I tried doing this:

Can I change the height of an image in CSS :before/:after pseudo-elements?

But it did not work for me. My code was like this:

.nav-btn:before {
        background-image: url('icons/mobile_menu_bttn.png');
        background-size: 16px 16px;
        width: 16px;
        height: 16px;
        content:"";
    }

It breaks the code.

I originally had the code like this:

.nav-btn:before {
        content: url('icons/mobile_menu_bttn.png');
 }

I tried adding just width and height and that didn't work either.

Does anyone know how I can accomplish this?

Community
  • 1
  • 1
Becky
  • 2,283
  • 2
  • 23
  • 50
  • 1
    Can you provide a fiddle? – PDKnight Jan 02 '16 at 22:23
  • It breaks it how? The website doesn't run? Something comes off alignment? And what is your CSS? All things that are not clarified. Can you post a CODEPEN or a JFiddle with the problem? Thank You :) – LOTUSMS Jan 02 '16 at 22:24
  • Here is a fiddle: https://jsfiddle.net/#&togetherjs=RRaFMqOUel – Becky Jan 02 '16 at 22:29
  • When I run the `background-image` code the image does not appear and the menu no longer drops. – Becky Jan 02 '16 at 22:29

1 Answers1

1

a) Add display: block; to the :before.

b) Add http:// to the beginning of the image URL.

The button is still there, and works just fine. But the image resource cannot be found, therefore there is not image. I.e. there is a problem with the URL, at least that is what Chrome says in the console.

Roope
  • 4,469
  • 2
  • 27
  • 51
  • The image works. Sorry I didn't change the code before I ran it. I forgot the http:// before it. https://jsfiddle.net/#run&togetherjs=RRaFMqOUel – Becky Jan 02 '16 at 22:36
  • That got the image to show, adding `display: block;`. However, now it is ignoring my `text-align: right;` in my normal `nav-btn` class. – Becky Jan 02 '16 at 22:39
  • @Becky Cannot see the code anymore. Which is exactly why you should include all the relevant code in the question itself, including both HTML and CSS. So please add the code to the question so that we can replicate the issue. – Roope Jan 02 '16 at 23:23