CSS Multi-Level Accordion Menu — Pointer & Icon

Question

https://codyhouse.co/demo/multi-level-accordion-menu/index.html

I used the above example to build my large, multi-level accordion menu for a mobile website.

Everything went well but when I reduced the left margins of the menu items, a ">" pointer, that turns 90% when open, and an icon of a folder got crammed over the text of the menu items.

I want to be able to reduce the left margins of the pointers and delete the folder icon.

Page after updating with problem: superimposed pointer and icon

Page before changing the margins and colors

Answer 1

UPDATE

Here's a starting point. I'm not going to complete the code for you. You should be able to figure out the rest from here. You can right click, inspect element, then play around with the CSS instead of going back and forth between the page and your code (this will not save so remember to copy it over to your code).

Add background: none to the following:

Remove Menu folder:

.cd-accordion-menu input[type=checkbox]:checked + label::after {
    background-position: -32px 0;
    background: none;
}

Remove Home folder:

@media only screen and (min-width: 600px)
style.css:215
.cd-accordion-menu ul label::after, .cd-accordion-menu ul a::after {
    /* left: 65px; */
    background: none;
}

Remove label folders:

@media only screen and (min-width: 600px)
style.css:215
.cd-accordion-menu ul label::after, .cd-accordion-menu ul a::after {
    /* left: 65px; */
    background: none;
}

Remove left positioning for label icons:

@media only screen and (min-width: 600px)
style.css:211
.cd-accordion-menu ul label::before {
    left: 65px;
}

You reduce the "margin" by removing padding-left from the following CSS:

@media only screen and (min-width: 600px)
style.css:206
.cd-accordion-menu ul label, .cd-accordion-menu ul a {
    padding-left: 60px;
}

Reduce padding from 60 to 40 in the following CSS:

@media only screen and (min-width: 600px)
style.css:208
.cd-accordion-menu ul label, .cd-accordion-menu ul a {
    padding-left: 40px;
}

Here's how it looks:

Answer 2

The chevron and folder are in the :before and :after pseudo-elements respectively. They are absolutely positioned. The inner component before had enough padding that the body text started after the icons. You removed the left padding so that was no longer the case. Since they aren't in document flow the will not be affected by a change in padding.

In my opinion, you should build components like this your self since any level of customization will require almost as much work digging into someone else code, without any guaranty that it's well written.

If you want to just get rid of the icons set

   .cd-accordion-menu label::before, 
   .cd-accordion-menu label::after {
      content: none;
   }

It looks like the css you're using is responsive so make sure to test on different screen sizes or remove the media queries. It probably will look fine on your screen but not on everyone's.

Also fyi padding vs margin aren't synonyms make sure to use the one you mean. If you don't know you should read up on the box-model