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

[ghazii]

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
Michael

[ghazii]

.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ghazii]

Hi David,

ok, the Mobile Header is enabled now.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ghazii]

No Problem….Mobile Header is disabled right now 😉

[David]

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%);
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ghazii]

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?

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ghazii]

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?

[Ying]

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

[ghazii]

Thank you!!!

[Ying]

No problem 🙂

[Author]

Posts