Support » Plugin: WP Reading Progress » Attach to bottom of sticky header?

  • Resolved traveller22

    (@traveller22)


    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Joeri van Veen

    (@ruigehond)

    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,
    Joeri

    Thread Starter traveller22

    (@traveller22)

    I 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="http://localhost/tfp/" rel="home" aria-label="The Flying Philosopher"><img width="3961" height="1044" src="http://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency.png" class="custom-logo" alt="The Flying Philosopher" srcset="http://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency.png 3961w, http://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency-300x79.png 300w, http://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency-1024x270.png 1024w, http://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency-768x202.png 768w, http://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency-1536x405.png 1536w, http://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="http://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency.png" class="custom-logo kadence-sticky-logo" alt="The Flying Philosopher" srcset="http://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency.png 3961w, http://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency-300x79.png 300w, http://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency-1024x270.png 1024w, http://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency-768x202.png 768w, http://localhost/tfp/wp-content/uploads/2021/02/Logo-Transparency-1536x405.png 1536w, http://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="http://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="http://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="http://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="http://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="http://localhost/tfp/contact/">Contact</a></li>
    </ul>
    </li>
    </ul>		</div>
    	</nav><!-- #site-navigation -->
    	</div><!-- data-section="primary_navigation" -->
    					</div>
    Plugin Author Joeri van Veen

    (@ruigehond)

    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.

    Plugin Author Joeri van Veen

    (@ruigehond)

    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

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Attach to bottom of sticky header?’ is closed to new replies.