Site title align with the primary menu text

Hi Michael,

If you are using transition for sticky navigation, then try this code to change the height:
https://generatepress.com/forums/topic/change-height-primary-menu-when-sticky/#post-175723

If you are not using transition:
https://generatepress.com/forums/topic/change-height-primary-menu-when-sticky/#post-175830

To add the site title into the navigation, you can try the inside navigation hook:
https://docs.generatepress.com/article/generate_inside_navigation/
https://generatepress.com/forums/topic/sitetitle-in-navbar-instead-of-icon/#post-225010

Let me know if this helps or if you need more info :)

Hi,

Seems like a lot of work just to have the site title stay in the sticky header. It does work when you use a graphic logo instead of a site title. I don't like to use a graphic logo if there is no logo. The text is crisper and not blurry. Is this something that you are going to be adding soon? Reading through the forum a lot of people have asked about it.

Michael

For the site title in navigation? It should be some copying and pasting for now.

Add this code:

add_action( 'generate_inside_navigation', 'tu_site_title_navigation' );
function tu_site_title_navigation() {
    ?>
    <div class="menu-site-title">
        My site title
    </div>
    <?php
}

Using this method: https://docs.generatepress.com/article/adding-php/#code-snippets

Then add this code:

.menu-site-title {
    float: left;
    font-size: 20px;
    color: #FFF;
}

Using this method: https://docs.generatepress.com/article/adding-css/

I do believe this will be added into the feature soon. Will ask Tom to confirm :)

It's on the road map. Using a title is more complicated as it requires more settings for the font size, color etc..

Hi,
OK now that you told me to use the code snippet plugin I was able to use the code. It does work but now I have the site title twice I guess I also have to style the sticky title with the font, size, etc. How do I call the font? I am using this theme for the first time and didn't know about simple css and code snippets plugin. If I need to put my site live so you can see it or log in I can. Let me know.

Thanks

Try this CSS to make it only show in sticky:

nav#site-navigation .menu-site-title {
    display: none;
}

You can call font by adding font-family: "Open Sans", sans-serif; inside the .menu-site-title bracket above.

A live site would definitely easier as I can likely just give you the full code.

Hi,

Sorry for the delay I am crazy busy at the moment. I have put the site live so you can see it. I sent the login info through the account issue form. The site is at https://audiopassion.net/

Thanks,
Michael

Hmm I don't see the code above (https://generatepress.com/forums/topic/site-title-align-with-the-primary-menu-text/#post-310690) being added?

When I added that code the site title disappeared so I took it out.

Michael

Hmm I'm not sure why that would happen. Can you add the code back in so I can take a look?

Thanks!

Just did. When you scroll down it goes away.

M

Can you give this CSS a shot instead:

.main-navigation:not(.navigation-stick) .menu-site-title {
    display: none;
}

Let me know :)

That worked. Now if it had some padding on the top to center it and match the font Montserrant Bold 23px it would be perfect. :)

Michael

Replace this block of code you've added before:

.menu-site-title {
    float: left;
    font-size: 20px;
    color: #FFF;
}

With:

.menu-site-title {
    float: left;
    font-family: "Montserrat", sans-serif;
    font-size: 23px;
    font-weight: 700;
    padding-top: 13px;
    color: #FFF;
}