css – Change logo size when elementor’s bar becomes sticky

Question

I am working on a site https://www.jangli-equipment.com/ that has sticky bar; its a WordPress site with Elementor.

The previous developer managed to change the logo size when the top bar becomes sticky only using this CSS code:

.elementor-403 .elementor-sticky--effects .elementor-element.elementor-element-b3b9e9b .man_logo_img {
    max-width:40px;
}

I made changes and the selectors changed and now the html code looks like this for nav bar:

When not sticky:

<div class="elementor-section elementor-top-section elementor-element elementor-element-14627734 elementor-section-content-middle snavbar elementor-section-boxed ang-section-padding-initial elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none elementor-sticky" data-id="14627734" data-element_type="section" data-settings="{&quot;background_background&quot;:&quot;classic&quot;,&quot;sticky&quot;:&quot;top&quot;,&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;],&quot;sticky_on&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;],&quot;sticky_offset&quot;:0,&quot;sticky_effects_offset&quot;:0}">
                        <div class="elementor-container elementor-column-gap-default">
                            <div class="elementor-row">
                    <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-cc92cc5 elementor-repeater-item-none elementor-repeater-item-none" data-id="cc92cc5" data-element_type="column">
            <div class="elementor-column-wrap elementor-element-populated">
                            <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-b314a78 slogomain elementor-repeater-item-none elementor-repeater-item-none elementor-widget elementor-widget-site-logo elementor-sticky" data-id="b314a78" data-element_type="widget" data-settings="{&quot;align_mobile&quot;:&quot;left&quot;,&quot;align_tablet&quot;:&quot;left&quot;,&quot;sticky&quot;:&quot;top&quot;,&quot;align&quot;:&quot;left&quot;,&quot;width&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;width_tablet&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;width_mobile&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;space&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;space_tablet&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;space_mobile&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;image_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;image_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;image_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;caption_padding&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;caption_padding_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;caption_padding_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;caption_space&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;caption_space_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;caption_space_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;sticky_on&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;],&quot;sticky_offset&quot;:0,&quot;sticky_effects_offset&quot;:0}" data-widget_type="site-logo.default">
                <div class="elementor-widget-container">
                    <div class="hfe-site-logo">
                                                    <a data-elementor-open-lightbox="" class="elementor-clickable" href="https://www.jangli-equipment.com">
                            <div class="hfe-site-logo-set">           
                <div class="hfe-site-logo-container">
                    <img class="hfe-site-logo-img elementor-animation-" src="https://www.jangli-equipment.com/wp-content/uploads/elementor/thumbs/cropped-logo--pwggxb23m2fr1mflujcsnk7ntvabqe14t2oiuet52g.jpg" alt="">
                </div>
            </div>
                            </a>
                        </div>  
                    </div>
                </div>
                        </div>
                    </div>
        </div>
                <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-727a6912 elementor-repeater-item-none elementor-repeater-item-none" data-id="727a6912" data-element_type="column" data-settings="{&quot;background_background&quot;:&quot;classic&quot;,&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}">
            <div class="elementor-column-wrap elementor-element-populated">
                            <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-8e3e87e elementor-widget__width-auto navmenulist elementor-repeater-item-none elementor-repeater-item-none elementor-widget elementor-widget-sm-menu" data-id="8e3e87e" data-element_type="widget" data-widget_type="sm-menu.default">
                <div class="elementor-widget-container">
            <div id="elementor-header-primary" class="elementor-header">            <button class="sm_menu_toggle"><i class="ti ti-menu"></i></button>
            <a class="sm_menu_toggle_close" href="#"><i class="ti ti-close"></i></a>
            <div id="sm_menu" class="sm_menu">
            
                <nav itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" id="elementor-navigation" class="elementor-navigation" role="navigation" aria-label="Elementor Menu">             
                <ul id="sm_nav_menu" class="sm_nav_menu"><li id="menu-item-2880" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-1589 current_page_item menu-item-2880"><a href="https://www.jangli-equipment.com/" aria-current="page">Home</a></li>
<li id="menu-item-3127" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3127"><a href="https://www.jangli-equipment.com/about-us/">About Us</a></li>
<li id="menu-item-431" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-431"><a href="https://www.jangli-equipment.com/products/">Products</a></li>
<li id="menu-item-3766" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3766"><a href="https://www.jangli-equipment.com/blog/">Blog</a></li>
<li id="menu-item-2988" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2988"><a href="https://www.jangli-equipment.com/contact-us/">Contact</a></li>
</ul>               </nav>

            </div>
        </div>
        

            </div>
                </div>
                <div class="elementor-element elementor-element-8009701 elementor-widget__width-auto elementor-hidden-tablet elementor-hidden-mobile elementor-repeater-item-none elementor-repeater-item-none elementor-widget elementor-widget-sm-search" data-id="8009701" data-element_type="widget" data-widget_type="sm-search.default">
                <div class="elementor-widget-container">
                    
        <div class="man_search_block">
            <i class="ti ti-search"></i>
        </div>
        <div class="man_search_block_bg">
            <div class="man_search_block_bg_close"></div>
            <div class="search-form">
                <form action="https://www.jangli-equipment.com" method="get">
                        <input type="text" name="s" id="search" class="search-form-text" placeholder="Search..." value="">
                        <button type="submit" class="search-form-submit">
                          <i class="ti ti-search"></i>
                        </button>
                </form>
            </div>
        </div>
    
            </div>
                </div>
                        </div>
                    </div>
        </div>
                                </div>
                    </div>
        </div>

And this is how the HTML code looks like for the sticky nav bar (When sticky)

<div class="elementor-section elementor-top-section elementor-element elementor-element-14627734 elementor-section-content-middle snavbar elementor-section-boxed ang-section-padding-initial elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none elementor-sticky elementor-sticky--active elementor-section--handles-inside elementor-sticky--effects" data-id="14627734" data-element_type="section" data-settings="{&quot;background_background&quot;:&quot;classic&quot;,&quot;sticky&quot;:&quot;top&quot;,&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;],&quot;sticky_on&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;],&quot;sticky_offset&quot;:0,&quot;sticky_effects_offset&quot;:0}" style="position: fixed; width: 1349px; margin-top: 0px; margin-bottom: 0px; top: 0px;">
                        <div class="elementor-container elementor-column-gap-default">
                            <div class="elementor-row">
                    <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-cc92cc5 elementor-repeater-item-none elementor-repeater-item-none" data-id="cc92cc5" data-element_type="column">
            <div class="elementor-column-wrap elementor-element-populated">
                            <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-b314a78 slogomain elementor-repeater-item-none elementor-repeater-item-none elementor-widget elementor-widget-site-logo elementor-sticky" data-id="b314a78" data-element_type="widget" data-settings="{&quot;align_mobile&quot;:&quot;left&quot;,&quot;align_tablet&quot;:&quot;left&quot;,&quot;sticky&quot;:&quot;top&quot;,&quot;align&quot;:&quot;left&quot;,&quot;width&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;width_tablet&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;width_mobile&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;space&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;space_tablet&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;space_mobile&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;image_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;image_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;image_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;caption_padding&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;caption_padding_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;caption_padding_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;caption_space&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;caption_space_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;caption_space_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;sticky_on&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;],&quot;sticky_offset&quot;:0,&quot;sticky_effects_offset&quot;:0}" data-widget_type="site-logo.default">
                <div class="elementor-widget-container">
                    <div class="hfe-site-logo">
                                                    <a data-elementor-open-lightbox="" class="elementor-clickable" href="https://www.jangli-equipment.com">
                            <div class="hfe-site-logo-set">           
                <div class="hfe-site-logo-container">
                    <img class="hfe-site-logo-img elementor-animation-" src="https://www.jangli-equipment.com/wp-content/uploads/elementor/thumbs/cropped-logo--pwggxb23m2fr1mflujcsnk7ntvabqe14t2oiuet52g.jpg" alt="">
                </div>
            </div>
                            </a>
                        </div>  
                    </div>
                </div>
                        </div>
                    </div>
        </div>
                <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-727a6912 elementor-repeater-item-none elementor-repeater-item-none" data-id="727a6912" data-element_type="column" data-settings="{&quot;background_background&quot;:&quot;classic&quot;,&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}">
            <div class="elementor-column-wrap elementor-element-populated">
                            <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-8e3e87e elementor-widget__width-auto navmenulist elementor-repeater-item-none elementor-repeater-item-none elementor-widget elementor-widget-sm-menu" data-id="8e3e87e" data-element_type="widget" data-widget_type="sm-menu.default">
                <div class="elementor-widget-container">
            <div id="elementor-header-primary" class="elementor-header">            <button class="sm_menu_toggle"><i class="ti ti-menu"></i></button>
            <a class="sm_menu_toggle_close" href="#"><i class="ti ti-close"></i></a>
            <div id="sm_menu" class="sm_menu">
            
                <nav itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" id="elementor-navigation" class="elementor-navigation" role="navigation" aria-label="Elementor Menu">             
                <ul id="sm_nav_menu" class="sm_nav_menu"><li id="menu-item-2880" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-1589 current_page_item menu-item-2880"><a href="https://www.jangli-equipment.com/" aria-current="page">Home</a></li>
<li id="menu-item-3127" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3127"><a href="https://www.jangli-equipment.com/about-us/">About Us</a></li>
<li id="menu-item-431" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-431"><a href="https://www.jangli-equipment.com/products/">Products</a></li>
<li id="menu-item-3766" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3766"><a href="https://www.jangli-equipment.com/blog/">Blog</a></li>
<li id="menu-item-2988" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2988"><a href="https://www.jangli-equipment.com/contact-us/">Contact</a></li>
</ul>               </nav>

            </div>
        </div>
        

            </div>
                </div>
                <div class="elementor-element elementor-element-8009701 elementor-widget__width-auto elementor-hidden-tablet elementor-hidden-mobile elementor-repeater-item-none elementor-repeater-item-none elementor-widget elementor-widget-sm-search" data-id="8009701" data-element_type="widget" data-widget_type="sm-search.default">
                <div class="elementor-widget-container">
                    
        <div class="man_search_block">
            <i class="ti ti-search"></i>
        </div>
        <div class="man_search_block_bg">
            <div class="man_search_block_bg_close"></div>
            <div class="search-form">
                <form action="https://www.jangli-equipment.com" method="get">
                        <input type="text" name="s" id="search" class="search-form-text" placeholder="Search..." value="">
                        <button type="submit" class="search-form-submit">
                          <i class="ti ti-search"></i>
                        </button>
                </form>
            </div>
        </div>
    
            </div>
                </div>
                        </div>
                    </div>
        </div>
                                </div>
                    </div>
        </div>

And this is the HTML part for the logo inisde the sticky bar:

<img class="hfe-site-logo-img elementor-animation-" src="https://www.jangli-equipment.com/wp-content/uploads/elementor/thumbs/cropped-logo--pwggxb23m2fr1mflujcsnk7ntvabqe14t2oiuet52g.jpg" alt="">

All what I want to do is to change the logo size from 100px to max of 40px when the nav bar becomes sticky.

How to fix that please using CSS only like the previous developer did?

Thank you so much
Aprecaited your participation.

0
Guru 1 month 2022-10-21T14:07:49-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse