Attach to bottom of sticky header?
-
Hi Joeri,
In the settings I try to set the location to the bottom of my sticky header.
What should I put there to make that happen?Thanks for the great plugin.
-
Hi @traveller22, thank you for reaching out to me, can you post a link to your site where the plugin is installed?
Usually I do it by right-clicking the header, choose ‘inspect’, then look in the code for a unique identifier (this can be an id or a combination of classes) that denotes the sticky part of the header. It can be some trial and error sometimes to get it right but I would be happy to take a look at your case.
Kind regards,
JoeriI find this in the Inspect Element. It divides the header in a left header and right header.
I am new to CSS. Can’t find the element of the sticky header.
Any suggestions?
<div class="site-header-main-section-left site-header-section site-header-section-left"> <div class="site-header-item site-header-focus-item" data-section="title_tagline"> <div class="site-branding branding-layout-standard site-brand-logo-only"><a class="brand has-sticky-logo" href="https://localhost/tfp/" rel="home" aria-label="The Flying Philosopher"><img width="3961" height="1044" src="https://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency.png" class="custom-logo" alt="The Flying Philosopher" srcset="https://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency.png 3961w, https://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency-300x79.png 300w, https://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency-1024x270.png 1024w, https://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency-768x202.png 768w, https://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency-1536x405.png 1536w, https://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency-2048x540.png 2048w" sizes="(max-width: 3961px) 100vw, 3961px" style="max-height: 90px;"><img width="3961" height="1044" src="https://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency.png" class="custom-logo kadence-sticky-logo" alt="The Flying Philosopher" srcset="https://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency.png 3961w, https://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency-300x79.png 300w, https://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency-1024x270.png 1024w, https://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency-768x202.png 768w, https://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency-1536x405.png 1536w, https://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency-2048x540.png 2048w" sizes="(max-width: 3961px) 100vw, 3961px" style="max-height: 90px;"></a></div></div><!-- data-section="title_tagline" --> </div> <div class="site-header-main-section-right site-header-section site-header-section-right"> <div class="site-header-item site-header-focus-item site-header-item-main-navigation header-navigation-layout-stretch-false header-navigation-layout-fill-stretch-false" data-section="kadence_customizer_primary_navigation"> <nav id="site-navigation" class="main-navigation header-navigation nav--toggle-sub header-navigation-style-standard header-navigation-dropdown-animation-fade" role="navigation" aria-label="Primary Navigation"> <div class="primary-menu-container header-menu-container"> <ul id="primary-menu" class="menu"><li id="menu-item-1495" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1495"><a href="https://localhost/tfp/start-here/">Start Here</a></li> <li id="menu-item-1425" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-1425"><a href="https://localhost/tfp/blog/">Blog</a></li> <li id="menu-item-1493" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1493 menu-item--has-toggle"><a href="#"><span class="nav-drop-title-wrap">Menu<span class="dropdown-nav-toggle" aria-pressed="false" aria-label="Expand child menu" tabindex="0" role="button"><span class="kadence-svg-iconset svg-baseline"><svg aria-hidden="true" class="kadence-svg-icon kadence-arrow-down-svg" fill="currentColor" version="1.1" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>Expand</title><path d="M5.293 9.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"></path> </svg></span></span></span></a> <ul class="sub-menu"> <li id="menu-item-1494" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1494"><a href="https://localhost/tfp/newsletter/">Newsletter</a></li> <li id="menu-item-1427" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1427"><a href="https://localhost/tfp/contact/">Contact</a></li> </ul> </li> </ul> </div> </nav><!-- #site-navigation --> </div><!-- data-section="primary_navigation" --> </div>
Sorry for the late reply, I did not get a notification of your answer!
I would try #site-navigation first but that might not work at all.
Can you please send me a link to the (test) install, I have to check the elements while scrolling and resizing to see which element would work.
Hope to be able to help you, again sorry for the late reply I will watch this space now.Hi traveler22, I’m going ahead and mark this thread as resolved now even though I did not get the chance to help you. I hope this means you got it working yourself already. Please reply or send me an e-mail if you need any support later.
Kind regards,
Joeri
- The topic ‘Attach to bottom of sticky header?’ is closed to new replies.