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

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

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

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
  • #1228317

    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:

    Customer Support

    Hi there,

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



    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?

    Customer Support


    1. Disable the Mobile Header


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


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

    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.


    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

    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.


    No, I don’t think I made any other changes in there, except those related to the slider as per

    and the separation of the containers as per

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


    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.

    Customer Support


    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.


    Thanks David – done.

    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.


    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(
        } 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.