Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • February 26, 2017 at 3:18 pm #751952
    samgrom

    Hi,
    Can anyone help me with the following problem please:

    On my website when you click on DISEASES you will see a long list of different health conditions on the right hand side.
    I would like this list to look like the example below (with nice background and separators, etc.):
    https://www.naturesaid.co.uk/

    I also need to remove the long drop down list of diseases which is way too long and appears when you hover the mouse on DISEASES in the main menu. Could you please let me know how to do this?

    Kind regards,
    Sam

    • This topic was modified 7 years, 2 months ago by samgrom.
    February 26, 2017 at 6:36 pm #751994
    Mike

    Hey Slawomir,
    For your sidebar menu you can try this code in the General Styling > Quick CSS field:

    .widget.widget_nav_menu{
    background-color: #557519;
        padding-left: 10px;
}
.widget.widget_nav_menu li {
    border-bottom: 1px solid #ddd !important;
}
.widget.widget_nav_menu li a {
    font-weight: bold;
    color: #fff !important;
}

    *Please note that this is some basic styling to get you started. You can change the values to suit your needs.

    To remove the long drop down sub menus, Try this code in the General Styling > Quick CSS field:

    .sub-menu {
    display: none !important;
}

    Best regards,
    Mike

    February 26, 2017 at 11:45 pm #752074
    samgrom

    Many thanks Mike,

    I’ve tried remove the long drop down sub menus using your code and it works on PC but unfortunately when I tested it on my phone and tried to clink on mobile menu it doesn’t show sub-menus any more?

    February 27, 2017 at 1:50 am #752102
    Mike

    Hi,
    Try this code in the General Styling > Quick CSS field, I have changed it to allow sub-menus on phones:

    @media only screen and (min-width: 768px) {
.sub-menu {
    display: none !important;
}
}

    Best regards,
    Mike

    February 27, 2017 at 10:54 pm #752587
    samgrom

    Its perfect now.
    Many thanks Mike.

    Concerning the the first problem and the background it looks better now but as you can see using the link below the separating lines are not perfectly white and they do not rich the left border, and there is an empty space on the bottom.
    Could you please help to correct this issue?

    Regards

    March 4, 2017 at 5:17 pm #755626
    Mike

    Hi,
    Try this code in the General Styling > Quick CSS field to replace the first code block:

    .widget.widget_nav_menu{
    background-color: #557519;
        padding-left: 0px !important;
}
.widget.widget_nav_menu li {
    border-bottom: 1px solid #fff !important;
}
.widget.widget_nav_menu li a {
    font-weight: bold;
    color: #fff !important;
}
#top .widget_nav_menu .nested_nav {
    padding-bottom: 0px !important;
}
div .widget_nav_menu{
padding-bottom: 0px !important;
}

    Best regards,
    Mike

    March 5, 2017 at 12:21 am #755751
    samgrom

    Thank you very much again Mike,
    Its almost perfect now. If you could only add a little space at least at the left border as letters touch it that would bi fantastic.
    Kind regards

    March 5, 2017 at 1:16 am #755759
    Mike

    Hi,
    Try this code in the General Styling > Quick CSS field:

    #top .widget_nav_menu li {
    padding-left: 10px;
}

    Best regards,
    Mike

    March 5, 2017 at 10:50 am #755886
    samgrom

    Many thanks again Mike. Its very kind of you.

    By the way, I also asked another question concerning blog categories and haven’t get any answer yet. May be you will be willing and able to suggest something please:

    BLOG CATEGORIES SUBMENU

    Kind regards

    March 5, 2017 at 2:15 pm #755921
    Mike

    Hi,
    I will look for it, and Thank you for using Enfold.

    Best regards,
    Mike

    March 7, 2017 at 12:02 am #756660
    samgrom

    Im sorry Mike, but I have just noticed that subcategories look bad now.
    Any idea how to fix it please?
    Regards

    March 7, 2017 at 6:12 am #756763
    Vinay

    Hi,

    I checked your site but cannot find the subcategories that you mentioned which looks bad, not sure if you got it sorted. If you still have any issue please upload a screenshot/mockup to imgur.com and share the link here so we can help you better :)

    Best regards,
    Vinay

    March 8, 2017 at 10:01 pm #758051
    samgrom

    Hi,
    I included another link and I just don’t like the divisions between them. It doesn’t look clear and aesthetic. Any idea how t improve it please?

    March 10, 2017 at 3:33 am #758666
    Vinay

    Hi,

    You can get started with the below css and tweak it to improve the look and feel of the menu. Try adding a dashed border to the bottom of the UL element and see if you like the results or check out https://codepen.io/tag/list-style/ for some inspiration :)

    .widget_nav_menu {
	padding: 20px 0!important;
}
#top .widget.widget_nav_menu li {
    border-bottom: none !important;
    line-height: 14px;
}

#top .widget.widget_nav_menu li > ul {
    padding: 10px 0 10px 10px;    
}
#top .widget.widget_nav_menu li > ul li {
    padding-left: 0;    
}
#top .widget.widget_nav_menu li > ul li::before {
  content: "• ";
  font-size:18px;
  left:-7px;
  color: gold; /* or whatever color you prefer */
}

    Best regards,
    Vinay

    March 12, 2017 at 11:49 am #759585
    samgrom

    Thanks Viney but I lost the borders and there were some other problems so I deleted it.
    Is there any plugin that would satisfy my needs?

    March 12, 2017 at 6:45 pm #759660
    Mike

    Hi,
    Yes I believe there are many good plugins that will meet your needs, while I don’t know one off hand, finding one that you like is kind of a trial and error process. I suggest testing one at a time to avoid conflicts.

    Best regards,
    Mike

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.