Topic: Shortcode nav

agruostudio
March 7, 2024 at 7:55 am

Hello!
I am creating a header block element to make a custom header.
I don’t know how to enter the generate press navigation menu. The primary and the secondary.
Reading on the forum I saw that there is a shortcode “[gp_nav]” but it doesn’t work for me.
can you help me
thank you
agruostudio
March 7, 2024 at 8:52 am

I want to expand the query.

I also want to remove the default navigation.
I put the following in the Personalization – Main Navigation and Secondary Navigation menu:

Navigation location: No navigation.

But the navigation is still showing.

David

March 7, 2024 at 8:58 am

Hi there,

there are no built in Shortcodes for the Navigation.

If you add the following PHP Snippet to your site then that will give you the shortcodes:


/* GP Nav Shortcode */
add_shortcode( 'gp_nav', 'tct_gp_nav' );
function tct_gp_nav( $atts ) {
    ob_start();
    generate_navigation_position();
    return ob_get_clean();
}

/* GP Nav Secondary Shortcode */
add_shortcode( 'gp_secondary_nav', 'gp_secondary_nav_shortcode' );
function gp_secondary_nav_shortcode( $atts ) {
    ob_start();
	generate_secondary_navigation_position();
    return ob_get_clean();
}

https://docs.generatepress.com/article/adding-php/

agruostudio
March 7, 2024 at 9:40 am

Thanks for the reply.
Now I have managed to create the shortcode for the navigation menu. However, I can’t build what I’m looking for, apparently simple but I’m going crazy. I will never understand the Generate Press header customizer. 🙁

1 – This is what I want to build:

2 – Here I show you the image of the builder where you can clearly see the logo in the central column and the navigation menu shortcode in the left column. (I have already opened a ticket for the reason that the svg is not visible when loading the page https://generate.support/topic/error-svg-logo-in-header/)

3- Here I show the customizer settings. The navigation menu that is seen is not the one in the custom header. That is, it is not the shortcode. But it is configured so that the navigation menu is not displayed!
I have the breakpoint high so that the toggle menu loads.

4- If I lower the breaking point….

I don’t understand anything…. Please, can you clarify this for me?

Thank you so much.
Ying
March 7, 2024 at 9:54 am

A simple layout like this can be done easily with some CSS.

Here’s doc of how to center your logo:https://docs.generatepress.com/article/centering-logo-navigation/

I would not think you need to build it manually.
agruostudio
March 7, 2024 at 10:44 am

Thanks for the reply.

I have developed the design as you have advised me.
I only find one problem. I have simplified the layout that I have shown you. But actually, on the right I need to put 4 icons that I have made in an element hook. What hook should I choose to insert these 4 icons there?

Here:
Ying
March 7, 2024 at 10:51 am

You can use the menu_bar_item hook.
agruostudio
March 11, 2024 at 8:01 am

Hello!
I have used your advice.
I have centered the logo following the document you have provided me.
https://docs.generatepress.com/article/centering-logo-navigation/
And I have inserted the icons using the generate_menu_bar_items hook.

However, I have a problem when I want to establish the design that I have shown you previously.

I need a hamburger toggle menu on the left. Logo in the center and icons on the right.

I get that structure when the menu is a desktop version but when I set the breakpoint so that the hamburger toggle menu is displayed (On desktop). It is shown on the right with the icons.
David
March 11, 2024 at 11:53 am

Can you share a password to get past the maintenance mode screen so we can see the issue ?
agruostudio
March 11, 2024 at 9:48 pm

Sorry!
I have shared the credentials.

David

March 12, 2024 at 2:21 am

You can use some CSS to change the Menu Hamburgers order position:


@media(min-width: 769px) {
    nav.main-navigation.has-branding .menu-toggle {
        order: -1;
        padding-inline: 20px;
    }
}

agruostudio
March 14, 2024 at 2:04 am

I am reaching out to seek assistance with some ongoing issues I am experiencing while working with your theme. Despite my fondness for GeneratePress’s versatility, I consistently encounter difficulties and challenges with header customization that result in significant time loss. I am hopeful that you can provide the necessary support to resolve these issues.

Firstly, I want to express my gratitude for the CSS code you provided earlier, which successfully aligned the hamburger menu button to the left while keeping account icons, login, wishlist, etc., on the right and the logo centered. This setup works perfectly.

However, I am facing a couple of challenges:

Color Customization Issue: When attempting to customize the background color via Appearance > Customize, the selected color does not reflect on the actual design. Although, upon inspecting the site with browser tools, I notice the CSS class:

.site-header { background-color: #ff0000; }
Despite this, the background color does not appear visually on the site.

Logo Visibility Issue: The logo included through Appearance > Customize is not displaying on the website, neither for normal nor retina screens. I am puzzled about why the logo is not visible despite being configured correctly.
I would greatly appreciate any guidance or solutions you could provide to address these issues. Your assistance is invaluable to me as I strive to optimize my website’s design and functionality.

Thank you for your time and support.

Best regards,
David
March 14, 2024 at 3:19 am

You have some CSS that is absolute positioning the Site Logo ( to center it inside the site header ).
BUT there is nothing else inside the site header.
And when you absolute position the logo; the logo no longer occupies any space in the header, so the header collapses. Which is why you do not see the background color or the logo.

What design are you trying to achieve ?
Do you have a mockup for desktop and mobile ?

I can then advise if its possible, and how to achieve that.
agruostudio
March 14, 2024 at 10:25 pm

Dear GeneratePress Support Team,

Thank you for your prompt response and for providing insights into the issues I am experiencing. I appreciate your assistance in this matter.

Regarding the design I am trying to achieve, I have a mockup that can give you a clearer idea. You can view the mockup here: https://ibb.co/qg1T0T6.

To center the logo within the site header, I followed the instructions provided in your documentation, which can be found at this link: https://docs.generatepress.com/article/centering-logo-navigation/.

Additionally, the icons on the right side of the header were implemented using the generate_menu_bar_items hook.

I am looking forward to your advice on how to adjust the CSS or any other settings to achieve the design shown in the mockup.

Thank you once again for your support.

Best regards,
David
March 15, 2024 at 2:02 am

The mockup link is not working for me. Can you check the URL is correct ?
agruostudio
March 15, 2024 at 4:04 am

Im sorry

https://ibb.co/qg1T0T6

Viewing 16 posts - 1 through 16 (of 19 total)

1 2 →

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Shortcode nav