-
AuthorPosts
-
April 16, 2024 at 8:17 am #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
NatashaApril 16, 2024 at 9:38 am #1440090Hey 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,
IsmaelApril 16, 2024 at 9:59 am #1440096Hey Ismael
Perfect thanks so much :-)
Also is there anyway to make the info in the sidebar sticky – so it scrolls with the page?
Cheers
NatashaApril 17, 2024 at 12:06 am #1440142Hey 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
NatashaApril 17, 2024 at 5:32 pm #1440215Hi,
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,
MikeApril 18, 2024 at 1:48 am #1440251Hey 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
NatashaApril 18, 2024 at 12:23 pm #1440277April 18, 2024 at 1:20 pm #1440286Hey 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
NatashaApril 18, 2024 at 5:41 pm #1440314Hi,
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,
MikeApril 19, 2024 at 12:58 am #1440326Hi 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
NatashaApril 19, 2024 at 11:29 am #1440351Hi,
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 threadBest regards,
MikeApril 22, 2024 at 1:12 am #1440471Thanks Mike that worked.
And I have created 2 new threads for the different questions :-)
April 22, 2024 at 6:35 am #1440475 -
AuthorPosts
- The topic ‘Icon list styling’ is closed to new replies.