[Resolved] Display multiple nav

[David]

Hi Tom,

i am setting up a theme styling page and want to be able to demonstrate different navigation styles on a single page, I found this code elsewhere in the forum:

function generate_navigation_shortcode() {
      return generate_navigation_position();
}
add_shortcode( 'generate_navigation', 'generate_navigation_shortcode' );

The code works, I tried wrapping each shortcode in it’s own Div so i could target them individually but the return statement only outputs the navigation and i lose the div and it’s class.
Anyway to do this so i can style each menu separately or am i asking the impossible

thanks

David

[Tom]

Hi David,

How are you adding the elements?

Like this?:

function generate_navigation_shortcode() {
      return '<div class="some-class">' . generate_navigation_position() . '</div>';
}
add_shortcode( 'generate_navigation', 'generate_navigation_shortcode' );

As long as nothing echos, you wouldn’t have a problem. If you need to echo something (outside the return), we can use output buffering instead.

Let me know 🙂

[David]

Hi Tom,

This is what i achieved by repeating the shortcode wrapped inside a div. But it loses the Div on output and any markup betweens shortcodes fall’s to the bottom of the content. Likewise putting the div in the function returns the Nav followed by the Div and i know i can’t do multiple returns in the function.

The page is going to be a showcase of different Nav styles each will be followed by the CSS required. I was thinking if i could punch out multiple navs maybe each with a unique data-attribute instead e.g Nav-style-# then i could I style them individually.

[Tom]

Is there any way you can link me to that page?

[David]

Here you go

[Tom]

That weird spacing is happening because GP adds margin to elements with the class navigation inside the content area.

You can overwrite that like this:

.site-main .inside-navigation {
    margin: 0;
}

As for the styling issue.. There’s no real easy way of adding to to current lists of classes and IDs, you’d have to wrap each shortcode inside a different element class I think.

[David]

I assume the nav element being a section of the page is why it falls outside of the Div then.
Does the secondary nav work in the same way?

Looks like i may have to fake the menu to get this to work……

[Tom]

I’m not sure what you mean by falls outside the div. Which div?

[David]

Sorry probably better to say that the <nav> jumps out of the div.
Whether i use PHP to return it within a div or place the shortcode in the div, the nav gets ouptut and then the div…..

[Tom]

Gotcha.

Try this:

function generate_navigation_shortcode() {
    ob_start();
    ?>
    <div class="some-class">
        <?php generate_navigation_position(); ?>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode( 'generate_navigation', 'generate_navigation_shortcode' );

[David]

Tom – thanks for sharing another piece of your genius.
It works. Have added multiple div outputs to the function.

thank you – resolved and coffees on me

[Tom]

Thank you! Really appreciate it 🙂

[David]

You’re more than welcome Tom.
I think i owe you a few more for the off the wall questions i keep posing!
Perhaps you can put it toward’s a monitor or buy Leo some socks!

[Tom]

Hahah 🙂

[David]

So the saga continues. Of course what i didn’t entertain is that the menus will break to the hamburger menu. So without losing mobile menu on the actual site, is there anyway to force these pseudo menus to maintain desktop (or mobile)?

[Author]

Posts