[Resolved] Site title align with the primary menu text

[Michael Mancini]

Hi,
I am trying to align the Site Tile with the primary menu text. I read the post where Tom explains how to use the menu item height & width adjustment and that works but now the sticky header is too narrow. Is there an adjustment for the sticky navigation padding?

Thanks

Header with menu item height width adjusted

Sticky header too narrow

Also how why does the Site title go away.

[Leo]

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 🙂

[Michael Mancini]

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

[Leo]

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 🙂

[Tom]

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

[Michael Mancini]

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

[Leo]

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.

[Michael Mancini]

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

[Leo]

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?

[Michael Mancini]

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

Michael

[Leo]

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

Thanks!

[Michael Mancini]

Just did. When you scroll down it goes away.

M

[Leo]

Can you give this CSS a shot instead:

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

Let me know 🙂

[Michael Mancini]

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

[Leo]

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

[Author]

Posts