Site logo

Archived topic

Buttons' location in mobile navigation

18 replies · Started by Rolandas on May 4, 2018

Viewing posts 1–15 of 19

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)

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?

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.

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

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.

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 :)

Thank you

CSS with mobile header.

CSS is almost running. I add a picture
CCS_test 1
Is it possible to somehow remove the bottom navigation bar?

THANK YOU LEO!

I left 1 "body" and everything works great

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

Ahh yeah my bad :)

Glad you figured out!

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.

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

This archived topic is closed to new replies.