Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1440076

    Hi there
    I wanted to make the icons smaller in the icon list so have used this CSS:
    /* Icon list icon size */
    .avia-icon-list .iconlist_icon {
    height: 30px;
    width: 30px;
    line-height: 30px;
    font-size: 18px;
    }
    Which has made the icons smaller however the title text beside it is out of line – how can I make the text line up with the icon?

    See on this page (site in development) : https://www.skills4lifepsychology.com/anxiety/

    Also is there anyway to make the info in the sidebar sticky – so it scrolls with the page?

    Cheers
    Natasha

    #1440090

    Hey xfacta,

    Thank you for the inquiry.

    You can add this css code to adjust the position of the icon and align with the title:

    #top .avia-icon-list .iconlist_icon {
        top: 15px;
    }

    Best regards,
    Ismael

    #1440096

    Hey Ismael

    Perfect thanks so much :-)

    Also is there anyway to make the info in the sidebar sticky – so it scrolls with the page?

    Cheers
    Natasha

    #1440142

    Hey Ismael

    Sorry just to add to this:

    Perfect thanks so much :-) And how can I make the spacing between each item slightly smaller?

    Also is there anyway to make the info in the sidebar sticky – so it scrolls with the page?

    Cheers
    Natasha

    #1440215

    Hi,
    To make each item closer together try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #after_section_1 .avia-icon-list li {
        padding: 0;
    }

    To make the sidebar widget scroll with the page try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function custom_script(){
      ?>
      <script>
    (function ($) {
      function a() {
        $(window).scroll(function (e) {
          var $sticky = $('#nav_menu-3');
          var position = ($sticky.css('position') == 'fixed');
          if ($(this).scrollTop() > 100 && !position) {
            $sticky.css({ 'position': 'fixed', 'top': '150px', 'width': $sticky.innerWidth() });
            $sticky.next().css('float', 'right');
            $sticky.addClass('fixed_element_style');
          }
          if ($(this).scrollTop() < 100 && position) {
            $sticky.css({ 'position': 'static', 'top': '0px', 'width': '' });
            $sticky.next().css('float', 'left');
            $sticky.removeClass('fixed_element_style');
          }
        });
      }
    
      a();
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_script');

    Best regards,
    Mike

    #1440251

    Hey Mike

    Thats brilliant thanks so much.

    Another question on the sidebar though – before I added the new functions stuff the sidebar shadow line didnt go all the way to the bottom of the page section – why is that? https://www.skills4lifepsychology.com/anxiety/
    Also how do I reduce the gap at the top under the Anxiety Management blue banner and the first bit of text “Feeling Overwhelmed by Anxiety? Take Back Control of Your Life.”?
    Cheers
    Natasha

    #1440277

    Hi,
    That is height of the sidebar, it is set by the contents not by the height of the page.
    To change the padding in the specific color section go to Layout ▸ Margin and Padding and choose a option:
    Enfold_Support_5492.jpeg

    Best regards,
    Mike

    #1440286

    Hey Mike

    So the sidebar contents or the page contents?

    For the colour section is that setting for the inside of the colour section or outside? As it’s the gap underneath the colour section that I would like to make smaller

    Cheers
    Natasha

    #1440314

    Hi,
    I believe that the gap that you are referring to is the top padding inside the second color section, currently it is the default 50px. So either try the small padding or no padding.

    Best regards,
    Mike

    #1440326

    Hi Mike

    For that top section color section I have the Margin and Padding set at No Padding (0px) not default size and it still has a large gap under it. So how can I reduce that gap please?

    Also for the Icon list – is anyway to change the icon list from being a h4 tag – and just a normal paragraph font/tag?

    And for the Header Social Icons – I have it set to: Display in main header area but they don’t show on mobile – how do I get the social icons to show on the mobile header area?

    Cheers
    Natasha

    #1440351

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #after_section_1 .template-page.content {
    	padding-top: 0;
    }

    adjust the zero to suit.
    Please note that we ask that each thread stays on a specific topic, this helps us keep threads manageable. This thread has already covered several topics, so for further questions please open a new thread

    Best regards,
    Mike

    #1440471

    Thanks Mike that worked.

    And I have created 2 new threads for the different questions :-)

    #1440475

    Hi,

    Glad to know that the solution worked! See you on the next thread. We’ll close this one for now.

    Have a nice day.

    Best regards,
    Ismael

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Icon list styling’ is closed to new replies.