[Resolved] Adding a PHP shortcode at bottom right of nav header

Home Forums Support Adding a PHP shortcode at bottom right of nav header

  • This topic has 17 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1228317
    ch1800

    Is it possible to add this PHP shortcode to the header, below navigation, at bottom corner, without having to create a child theme and changing header template:

    <div align=right><?php echo do_shortcode('[google-translator]'); ?> </div>

    This was at previous website I’m migrating, in child themes header template and was displaying that way:

    #1228362
    David
    Staff
    Customer Support

    Hi there,

    you can use a Hook Element, and select the after_header_content hook

    https://docs.generatepress.com/article/hooks-element-overview/

    #1228650
    ch1800

    I’ve added this hook and works fine on desktop but disappears on mobile when menu becomes hamburger…
    Any way to keep alive on mobiles?

    #1228669
    David
    Staff
    Customer Support

    Options:

    1. Disable the Mobile Header

    or

    2. create another Hook and with the same code and select the inside_mobile_header hook

    #1228697
    ch1800

    The first option is too messy but the second, currently active, doesn’t seem to work.

    #1229150
    David
    Staff
    Customer Support

    Add this CSS:

    .main-navigation #flags ul {
        display: block;
    }

    Although those icons may be a little small for mobile devices.
    You may want to add the Shortcode to the Off Canvas Widget area instead to make them more accessible.

    #1229222
    ch1800

    That works now and it’s not bad.
    I prefer having them here instead of the Off Canvas as it’s simpler to use.

    But the placement is a bit odd at top left and don’t well understand why the logo centers as this was already the case before when I increased it size.

    I tried to better align those elements for small screens but failed miserably…

    How would I align them all that way?

    Logo: top left
    Hamburger: top right
    Flags: bottom right

    #1229545
    David
    Staff
    Customer Support

    Looks like you made some changes to desktop as well?

    If you can disable the autoptimize, and look for any CSS thats affecting the navigation layout in Customizer > Additional CSS then we can look at whats required for desktop and mobile.

    #1229799
    ch1800

    No, I don’t think I made any other changes in there, except those related to the slider as per
    https://generatepress.com/forums/topic/catalyst-adding-sliding-slogans-at-homepage-header/#post-1228357

    and the separation of the containers as per
    https://generatepress.com/forums/topic/containers-for-posts-pages-and-widgets/

    and added this for the logo height according to another thread:

    /* mobile logo height */
    .mobile-header-navigation .site-logo.mobile-header-logo img {
        height: 120px;
    	margin-top: 40px;
    }

    I don’t run Autoptimize at this site, so I don’t well understand to what you are referring to exactly. Maybe Asset Cleanup? I just cleared all caches there.

    I see I also commented this out… but forgot what for:

    /*
    body.single .site.grid-container {
        max-width: 1000px;
    } 
    */
    #1230857
    David
    Staff
    Customer Support

    Can you disable whatever cache / optimization plugins you’re using ? Then i can see where the CSS affecting the positioning is coming from.

    Also in your HTML can you remove: align=right from the mobile hook.

    #1230913
    ch1800

    There was only Asset Cleanup and Flying Pages activated and I just de-activated them both.
    Fastest Cache was active but not enabled but I just also de-activated it.

    There is nothing else of this kind at this temporary URL.

    #1230994
    David
    Staff
    Customer Support

    Thanks

    The HTML for your Flags in the Mobile Header can you change it to:

    <div class="mobile-translate"><?php echo do_shortcode('[google-translator]'); ?> </div>

    Then i can provide the CSS to position it.

    #1231006
    ch1800

    Thanks David – done.

    #1231022
    David
    Staff
    Customer Support

    Try this CSS:

    .mobile-translate {
        order: 4;
        width: auto;
        flex: 1 0 calc(100% - 20px);
        margin-right: 20px;
    }
    .main-navigation #flags {
        width: 100%;
    }
    .main-navigation #flags ul {
        float: right !important;
    }

    In your Header Element you need to add some more top padding for mobile – this will stop the hero text from hitting the navigation elements.

    #1231097
    ch1800

    That’s really great and works just fine, many thanks David and sorry if I asked too much.
    I really appreciate your patience and knowledge.

    I’ll play around a bit with those settings and I’ll be ready soon to move back to the original URL and replace the old site.

    I have only 2 interrogations left that are really secondary.
    I understand that this might be out of the scope of your support, in that case just ignore them, but I’m really unable to find the solution after testing dozens of variants…

    1. In order to get post categories on top of pages, right before the post’s date, I’ve added this snippets that you suggested and that works just fine:

    add_filter( 'generate_header_entry_meta_items', function( $items ) {
        if ( is_single() ) {
    		$items = array(
    			'categories', 
    			   'date',
            );
        } return $items;
    } );

    The only thing is that it is not clear what “internet” means right in front of a date and I would like to add a plain text prefix, like “category: Internet” and then “publication date: xxx”.
    I really cannot find a way for adding plain text in there and, believe me, I searched…

    2. The only layout trick I miss from the previous site (you still have the link inside the slider) is this orange line (class=”line”) that shows below widget titles, at homepage and sidebar:

    Is something similar possible to implement here with CSS or is it more complex than that?

    Thanks again.

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.