[Support request] Sticky Site Title Issue

[muralidharan]

Hi

I seem to have an issue with scrolling of my site title ( it is not sticky) . while the primary menu is visible while i scroll down my site title ‘enright public relations’ becomes invisible while you scroll down. thought it worked earlier, now it doesnt seem to work.

here it the link to the website http://www.enrightpr.in

You will notice when you scroll down the navigation menu’s are shown but the site title is invisible.

hope you will help

thanks
muralidharan

[David]

Hi there,

how were you adding the Site Title to the Navigation?

[muralidharan]

Hello David

I added site title using the customization feature. It is independent of the navigation.

what I am trying to achieve is when I scroll down, I would like to see alongside my primary navigation menu, my site title ‘enright public relations’ which is towards the left of the nagivation menu.

pls advise

thanks
muralidharan

[David]

So lets try this:

Create a new Hook Element, and add this content:

<div class="site-branding sticky-brand">
    <p class="main-title" itemprop="headline">
        <a href="http://www.enrightpr.in/" rel="home">enRight Public Relations</a>
    </p>
</div>

Select the inside_navigation hook and set the display rules to the entire site.

Then a little CSS to hide it on static navigation, and to align the nav:

.site-navigation:is_stuck .inside-navigation  {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.main-navigation:not(.is_stuck) .sticky-brand {
	display: none;
}

[muralidharan]

Hi David, I am not a developer 🙁 In the GP hooks menu i do not find inside navigation hook) so where do i find them? right now i see the gp hooks under the elements button. May be a link to this process will help.

Is there a way we can achieve this using the Custom CSS

On a quick note in the CSS i also found

(id or class)(whatever the div name it is) {
display: none;
}

i find error expected token. Dont know it appears now, as we keep updating we dont realise these changes:)

hoping to hear from you.

thanks so much

[David]

Hi there,

make sure the GP Premium plugin is up to date. And then go to Appearance > GeneratePress and activate the elements module which will appear in the Appearance menu:

https://docs.generatepress.com/article/hooks-element-overview/

[muralidharan]

Hi David found the tutorial helpful. Now I have done the first two steps

created a new hook
display rule to entire site
and then where do I add the CSS? in the custom CSS? on within the GP Hooks area?
this one…

.site-navigation:is_stuck .inside-navigation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.main-navigation:not(.is_stuck) .sticky-brand {
display: none;
}

thanks

[David]

Here:
https://docs.generatepress.com/article/adding-css/

[Author]

Posts