Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • May 2, 2016 at 5:23 pm #625947
    tremblayly

    Hi

    I’ve looked at many threads and tried various CSS code to try to solve my issue. However, none worked.

    On my page here (see password to access): http://silviafindings.wpengine.com/myhome (hosted on WPengine)
    I use navigation menu widgets on the left and on the right I use the regular blog widgets. For the nav menus I adjusted the widget titles, line height and padding successfully. But there are bullets that appear in the sub-menu links and these bullets also show in the right sidebar links.

    So:
    1) How do I get rid of these bullets in the right sidebar all together.
    2) How do I get rid of these bullets in the nav sub-menu, indent the sub-menu level text, and reduce the text size a little

    I also noticed that after the sub-menu, the bottom border appears to be darker/doubled. How do I fix this?

    Any help you can provide would be greatly appreciated.

    Lyse

    May 3, 2016 at 1:51 pm #626429
    Yigit

    Hey Lyse!

    Can you please post username as well? I tried to use the password for username as well but that did not work :)

    Best regards,
    Yigit

    May 4, 2016 at 2:46 pm #627261
    tremblayly

    Hi Yigit

    I thought I did this, but here they are.

    May 6, 2016 at 11:27 am #628211
    Vinay

    Hi,

    To remove bullet points please add this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    
.widget li {
  list-style: none;
}

    Please note the above css will affect site wide list items in widgets to avoid that please add a custom class to the text widget. Replace the custom css class name with .widget in the above code.

    You can easily enabling custom css class name support as mentioned in this link
    http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    To remove the smaller dot on the left sidebar please use the below css

    #top .widget_nav_menu ul ul li:before {
    content: " "!important;
}

    Best regards,
    Vinay

    May 6, 2016 at 3:05 pm #628335
    tremblayly

    Hi Vinay,

    1) The list style issue is now resolved. However, I don’t get the custom class option for the widgets.

    2) As for the nav menu in the left sidebar, the dot gets remove with the code you provided, but I lost the indent of the subcategories.
    Here are links to screen shots of the before and after the code is applied
    https://www.dropbox.com/s/nugmmna0b8slvoo/earrings%20sub-cat.jpg?dl=0
    https://www.dropbox.com/s/u2z0ii55nc4xa2u/earrings%20sub-cat%20ident%20lost.jpg?dl=0

    3) Also, how do I get rid of the double line between the sub-categories and the parent categories?
    Here a link to a screen shot
    https://www.dropbox.com/s/ggxsvwyepk4cvp5/earrings%20double%20%20lines.jpg?dl=0

    Thank you

    May 10, 2016 at 5:59 am #629608
    Ismael

    Hi,

    1.) I’m sorry but you can’t add custom css class attribute to the widgets but they will get a unique id automatically. The id of the custom nav widget is “#nav_menu-4”.

    2.) What indent? I don’t see any space with or without the code.

    3.) Use this to fix the border:

    #top .content .flex_column .widget_nav_menu li:last-child {
    border-bottom: 0;
}

    Best regards,
    Ismael

    May 10, 2016 at 4:32 pm #630061
    tremblayly

    Hi Ismael,

    The double line is now resolved with the CSS you provided.

    As for the indent, here’s a snapshot: https://www.dropbox.com/s/ksn7ap8jwz9c7gr/indent.jpg?dl=0
    I would expect the same behavior for the items listed in the red box as for the items listed in the green box.
    The format in the green box is what it should be because these are all sub-menu items (that the dot was removed for) but the indent should remain.

    Thank you for your patience
    Lyse

    May 12, 2016 at 12:58 am #631045
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    
.widget_nav_menu ul.sub-menu li {
    margin-left: 10px!important;
}

    Best regards,
    Yigit

    May 12, 2016 at 1:09 am #631051
    tremblayly

    Hi Yigit,
    That code did indent the sub-menu items, but also indented the border lines. How can I not indent the borders?
    Thank you

    May 12, 2016 at 1:29 am #631055
    Yigit

    Hi!

    Please use following code instead

    .widget_nav_menu ul.sub-menu li {
    text-indent: 10px!important;
}

    Regards,
    Yigit

    May 12, 2016 at 2:11 am #631073
    tremblayly

    Hi Yigit,
    Sorry to say that this also did not work.
    Thanks

    May 12, 2016 at 4:27 am #631091
    Vinay

    Hi,

    To make the sidebar nav like the below screenshot

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    
#top .widget_nav_menu ul ul .sub-menu, #top .widget_nav_menu ul ul .children {
    padding: 0px!important;
}

#top .widget_nav_menu ul ul .sub-menu li  {
    padding-left: 10px!important;
}

    Best regards,
    Vinay

    May 12, 2016 at 3:15 pm #631421
    tremblayly

    HI Vinay,

    Wonderful!

    Thank you very much all of you for helping me customizing my sidebar navigation menu!

    Lyse

    May 13, 2016 at 5:54 am #631802
    Vinay

    Hey!

    Glad we could help! We really appreciate it if you rate our theme on Themeforest.

    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Sidebar widgets styling’ is closed to new replies.