I’m engaged on a website https://www.jangli-equipment.com/ that has sticky bar; its a WordPress website with Elementor.
The earlier developer managed to vary the brand dimension when the highest bar turns into sticky solely utilizing this CSS code:
.elementor-403 .elementor-sticky--effects .elementor-element.elementor-element-b3b9e9b .man_logo_img {
max-width:40px;
}
I made modifications and the selectors modified and now the html code appears to be like 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="part" data-settings="{"background_background":"traditional","sticky":"high","motion_fx_motion_fx_scrolling":"sure","motion_fx_devices":["desktop","tablet","mobile"],"sticky_on":["desktop","tablet","mobile"],"sticky_offset":0,"sticky_effects_offset":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="{"align_mobile":"left","align_tablet":"left","sticky":"high","align":"left","width":{"unit":"%","dimension":"","sizes":[]},"width_tablet":{"unit":"%","dimension":"","sizes":[]},"width_mobile":{"unit":"%","dimension":"","sizes":[]},"area":{"unit":"%","dimension":"","sizes":[]},"space_tablet":{"unit":"%","dimension":"","sizes":[]},"space_mobile":{"unit":"%","dimension":"","sizes":[]},"image_border_radius":{"unit":"px","high":"","proper":"","backside":"","left":"","isLinked":true},"image_border_radius_tablet":{"unit":"px","high":"","proper":"","backside":"","left":"","isLinked":true},"image_border_radius_mobile":{"unit":"px","high":"","proper":"","backside":"","left":"","isLinked":true},"caption_padding":{"unit":"px","high":"","proper":"","backside":"","left":"","isLinked":true},"caption_padding_tablet":{"unit":"px","high":"","proper":"","backside":"","left":"","isLinked":true},"caption_padding_mobile":{"unit":"px","high":"","proper":"","backside":"","left":"","isLinked":true},"caption_space":{"unit":"px","dimension":0,"sizes":[]},"caption_space_tablet":{"unit":"px","dimension":"","sizes":[]},"caption_space_mobile":{"unit":"px","dimension":"","sizes":[]},"sticky_on":["desktop","tablet","mobile"],"sticky_offset":0,"sticky_effects_offset":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="{"background_background":"traditional","motion_fx_motion_fx_scrolling":"sure","motion_fx_devices":["desktop","tablet","mobile"]}">
<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 category="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" function="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="web page">Residence</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/merchandise/">Merchandise</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/weblog/">Weblog</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">
<kind motion="https://www.jangli-equipment.com" technique="get">
<enter kind="textual content" identify="s" id="search" class="search-form-text" placeholder="Search..." worth="">
<button kind="submit" class="search-form-submit">
<i class="ti ti-search"></i>
</button>
</kind>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And that is how the HTML code appears to be like 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="part" data-settings="{"background_background":"traditional","sticky":"high","motion_fx_motion_fx_scrolling":"sure","motion_fx_devices":["desktop","tablet","mobile"],"sticky_on":["desktop","tablet","mobile"],"sticky_offset":0,"sticky_effects_offset":0}" type="place: mounted; width: 1349px; margin-top: 0px; margin-bottom: 0px; high: 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="{"align_mobile":"left","align_tablet":"left","sticky":"high","align":"left","width":{"unit":"%","dimension":"","sizes":[]},"width_tablet":{"unit":"%","dimension":"","sizes":[]},"width_mobile":{"unit":"%","dimension":"","sizes":[]},"area":{"unit":"%","dimension":"","sizes":[]},"space_tablet":{"unit":"%","dimension":"","sizes":[]},"space_mobile":{"unit":"%","dimension":"","sizes":[]},"image_border_radius":{"unit":"px","high":"","proper":"","backside":"","left":"","isLinked":true},"image_border_radius_tablet":{"unit":"px","high":"","proper":"","backside":"","left":"","isLinked":true},"image_border_radius_mobile":{"unit":"px","high":"","proper":"","backside":"","left":"","isLinked":true},"caption_padding":{"unit":"px","high":"","proper":"","backside":"","left":"","isLinked":true},"caption_padding_tablet":{"unit":"px","high":"","proper":"","backside":"","left":"","isLinked":true},"caption_padding_mobile":{"unit":"px","high":"","proper":"","backside":"","left":"","isLinked":true},"caption_space":{"unit":"px","dimension":0,"sizes":[]},"caption_space_tablet":{"unit":"px","dimension":"","sizes":[]},"caption_space_mobile":{"unit":"px","dimension":"","sizes":[]},"sticky_on":["desktop","tablet","mobile"],"sticky_offset":0,"sticky_effects_offset":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="{"background_background":"traditional","motion_fx_motion_fx_scrolling":"sure","motion_fx_devices":["desktop","tablet","mobile"]}">
<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 category="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" function="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="web page">Residence</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/merchandise/">Merchandise</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/weblog/">Weblog</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">
<kind motion="https://www.jangli-equipment.com" technique="get">
<enter kind="textual content" identify="s" id="search" class="search-form-text" placeholder="Search..." worth="">
<button kind="submit" class="search-form-submit">
<i class="ti ti-search"></i>
</button>
</kind>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And that is the HTML half for the brand 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 need to do is to vary the brand dimension from 100px to max of 40px when the nav bar turns into sticky.
Learn how to repair that please utilizing CSS solely just like the earlier developer did?
Thanks a lot
Aprecaited your participation.
