[Rhapsody]

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

[Syahir Hakim]

Syahir Hakim

#51301

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

[Rhapsody]

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.

[Syahir Hakim]

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]

Rhapsody

#51313

Thanks! That worked perfectly.