Insert Content in line to left of Collapsed Menu

  • Rhapsody

    #51275

    I would like to insert custom icons with links in line with the collapsed menu icon that become part of a responsive menu when someone is viewing my site on a mobile device. The icons are a subset of the full menu the graphene theme displays on the desktop site. I am able to make the icons appear, but rather than being in line with the collapsed menu icon, it displays either above or below depending on the css I use.

    How do I display the icons in-line with the collapsed menu icon?

    Background:

    I have successfully created the series of icons to display with the page links using a custom function ‘display_icon_menu’ and can detect when it is viewed on the mobile device using the hook:
    if (isMobileDevice()) add_action('graphene_navbar_header', 'display_icon_menu');

    The custom function echos the icons inside a <div> tag so it may be styled.
    echo "<div class='iconMenu'>" . $icon_menu. "</div>"; // show the icon menu

    Admin

    Syahir Hakim

    #51301

    Please provide a link to your website so that we can take a look.

    Rhapsody

    #51306

    Thanks Syahir. This is the link: https://crew-mgr.com/
    View it on a phone and you’ll see the graphic icons on a line below the collapsed menu. On the desktop the icons are hidden and the normal menu is displayed as desired. I would like to style the icons to display in the same line as the collapsed menu on the phone. For now I have moved them directly after the icon menu until I can figure out how to style them in line.

    Admin

    Syahir Hakim

    #51309

    Try adding the following code to Additional CSS:

    .iconMenu {
        margin-top: -43px;
    }
    

    You might need to reduce the size of the icons a little so they all fit in a single line without overlapping the menu button.

    Rhapsody

    #51313

    Thanks! That worked perfectly.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.
Do NOT follow this link or you will be banned from the site!