[Resolved] Buttons' location in mobile navigation

[Rolandas]

Hi
How do I change buttons’ location in mobile navigation?
I would like to switch places of menus and the search buttons (menu button shoud be on the right)

[Leo]

Hi there,

Try using the mobile header and upload a mobile header logo: https://docs.generatepress.com/article/mobile-header/

Let me know.

[Rolandas]

I did it. With the buttons everything is as I wanted.
But now does not show site title and tagline.

Question: Is it possible with mobile header to see site title and tagline?

[Leo]

You’d have to try something like this: You’d have to do something like this: https://generatepress.com/forums/topic/site-title-instead-on-logo-on-mobile-heder/#post-252767

Then CSS might have to be adjusted but we can take a look once you added in.

Let me know 🙂

[Rolandas]

Thank you.
I tried it. That’s not what I want.
A “full” header works for me well: on a computer, a tablet, a small and a big phone.

If there are no other options to change the position of the search button in mobile navigation,
I will remove the search from the navigation and will not use the mobile header.

[Rolandas]

I put the site title and site tagline in one line:

.site-description {
  float: none;
  line-height: 28px;
  display: inline-flex;
  letter-spacing: 1px;
  word-spacing: 3px;} 

.main-title {
  float: none;
  padding-right: 12px;
  line-height: 28px;
  display: inline-flex;
  letter-spacing: 1px;
  word-spacing: 3px;
}

and now I would like to put the site logo before site title
(all in one line: site logo, site tite, site tagline, aligned in header center).

I did it as shown:(https://docs.generatepress.com/article/putting-site-title-next-logo/)
I did not succeed

[Leo]

That CSS will only work if you have a site logo uploaded here: https://docs.generatepress.com/article/adding-header-logo/

[Rolandas]

I want to return to the initial question:
Is it possible in a mobile view, switch places of menus and the search buttons (menu button shoud be on the right). How can I do this?
I definitely want to keep on mobile view the same (current) header with the site title and tagline.

[Leo]

Can you try the mobile header solution again with this CSS below?

@media (max-width: 768px) {
    body body .site-header {
        display: block!important;
        opacity: 1;
    }
}

I just tested and it should work.

Let me know 🙂

[Rolandas]

Thank you

CSS with mobile header.

CSS is almost running. I add a picture

Is it possible to somehow remove the bottom navigation bar?

[Leo]

Edited the CSS here: https://generatepress.com/forums/topic/buttons-location-in-mobile-navigation/#post-569213

Let me know.

[Rolandas]

THANK YOU LEO!

I left 1 “body” and everything works great

@media (max-width: 768px) {
    body .site-header {
        display: block!important;
        opacity: 1;
    }
}

[Leo]

Ahh yeah my bad 🙂

Glad you figured out!

[Rolandas]

Hi

After upgrading to 2.1.2
Navigation logo disappeared in mobile view.

The mobile views looks different:
On computer and phone / tablet – shows a link (site title);
On phone / tablet – shows a square.

[David]

Hi there the logo has a 404 error. Can you try clearing any plugin / server caches?

[Author]

Posts