[Support request] Instagram button in mobile and sticky navigation and change order

Home Forums Support [Support request] Instagram button in mobile and sticky navigation and change order

Home Forums Support Instagram button in mobile and sticky navigation and change order

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #2314316

    Hi dear Support-Team,

    I hope you can help me, because I’m really desperate now.
    I want to put an instagram button in the mobile and sticky navigation by changing the order.
    Last night I managed to do it too, but I can’t get over the placement of the elements like “Search”, “Hamburger Navigation”, “Logo” and the “Instagram Button”.

    Since I read across here, I switched from Float to Flex in the settings.

    Then I added the Instagram button via the elements hooks in “generate-menu-bar-items” with the following code:

    <a class="fa fa-instagram" aria-hidden="true" href="https://www.instagram.com/xxx/" target="blank"></a>

    Now the whole thing looks like this in the mobile menu:

    And in the sticky menu like this:

    In the mobile menu, the hamburger menu should be on the far right.
    On the far left is the search and to the right is the Instagram button.

    And in the sticky menu, only the logo should be in the middle. The rest as described above.

    And as you can see, the buttons in the sticky view also change size…for whatever reason. All buttons should be the same size and in a line.

    Can you help me with this?

    And this is how it should look like (photoshop)

    Here ist the URL: https://www.mx-info.de

    Thanks in advance



    Customer Support

    Hi there,

    first go to Customizer > Layout > Header and enable the Mobile Header, and add a Logo for your Mobile Header.
    Once thats done, let me know and ill take a look at the CSS to position the icons


    Hi David,

    ok, the Mobile Header is enabled now.

    Customer Support

    Aah… sorry i just relooked at that image…. you need to keep the site header image in place.
    Can you disable the Mobile Header….


    No Problem….Mobile Header is disabled right now πŸ˜‰

    Customer Support

    Try this CSS:

    @media (max-width: 1490px) {
        .main-navigation .menu-bar-items {
            margin-left: unset !important;
            margin-right: auto;
            padding-left: 20px;
            order: -1;
        .main-navigation .navigation-branding {
            margin: unset;
            position: absolute;
            left: 50%;
            top: 0;
            transform: translateX(-50%);

    That looks good…thank you for that!

    But a few things are still wrong:

    1. The Instagram logo is on the far left and the magnifying glass is on the right….this should be the other way around.

    2. In mobile navigation The space on the left is smaller than on the right of the burger menu

    3. in sticky view, all three icons are at different heights

    Can you maybe help me out there too?

    Customer Support

    Try this:

    .main-navigation button.menu-toggle {
        padding-right: 20px;
    .main-navigation .menu-bar-item.search-item > a {
        padding-left: 10px;
    .is_stuck .menu-bar-items .fa-instagram {
        position: relative;
        top: -5px;

    ooh…..cooool πŸ˜‰
    Thank you so much!

    But how do I get the magnifying glass all the way to the left and the Instagram logo next to it?
    So exactly the other way around?

    Customer Support

    Are you trying to swith the position of search icon and ins icon? If so, try add this CSS:

    .menu-bar-items {
        flex-direction: row-reverse;

    Thank you!!!

    Customer Support

    No problem πŸ™‚

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