Sticky Site Title Issue

Hi there,

how were you adding the Site Title to the Navigation?

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

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;
}

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

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/

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

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