CSS to override child indenting issue

  • Resolved angiebordeaux

    (@angiebordeaux)


    8 years, 10 months ago

    Full disclosure: I’m very new at this, so don’t be afraid to dumb responses down!

    I’m working on making modifications to my organization’s website which uses the Jobify theme. I’ve added a custom sidebar menu using CMW which works great, but I’d like to change two bits of functionality.

    1. Is there a way to change the font sizing and spacing? This isn’t a big deal, but it would be nice if there was more spacing between menu items.

    2. The bigger issue is indenting children. I understand I am having trouble with this due to the theme settings. However, I have access to the custom css file and was wondering if anyone has bit of code I could use to indent children and override my theme’s settings.

    Thanks for any assistance you can provide!

    https://www.ads-software.com/plugins/custom-menu-wizard/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author wizzud

    (@wizzud)

    Do you have a web-accessible url that I can look at? It makes it far easier to provide CSS that works, even it then needs tweaking a bit.

    Thread Starter angiebordeaux

    (@angiebordeaux)

    Thanks for the quick reply and offer to look!
    https://agefriendly.community/models/

    The 4 items under that in the side menu are the children that I was hoping to indent.

    Plugin Author wizzud

    (@wizzud)

    1.
    Spacing between items :
    You currently have 5px top & bottom margins on the LI items; you could increase it to, say, 10px using (for example)…

    .widget ul li {
    margin: 10px 0;
}

    Font size :
    Add something like (for example)…

    .widget li a {
    font-size: 1.1em; /*use a px value if you prefer*/
}

    Obviously, if you want to change the font-family, or letter-spacing, or whatever, then you can do it there as well.

    2.
    Indentation :
    Your stylesheet is removing all indentation. To add it back (for example)…

    .widget ul ul, .widget ul ol {
    margin-left: 1em; /*use a px value if you prefer*/
}

    NB : You have set the sub-menus to use OL (hence the inclusion of the .widget ul ol rule above) but since bullets/numbering are not displayed (because of the CSS), there’s no point; you might as well leave sub-menus at the UL default.

    As always, I would recommend that you use a child theme to make styling modifications – unless your Jobify theme allows for custom CSS to be added via its theme options (some themes do, most don’t). WordPress has articles about using child themes, and it’s possible that your theme provider may have specific instructions as well (maybe even an example).

    Thread Starter angiebordeaux

    (@angiebordeaux)

    Thank you so much!!! This helped tremendously!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS to override child indenting issue’ is closed to new replies.