Archived topic
Buttons' location in mobile navigation
18 replies · Started by Rolandas on May 4, 2018
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)
Hi there,
Try using the mobile header and upload a mobile header logo: https://docs.generatepress.com/article/mobile-header/
Let me know.
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?
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 :)
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
That CSS will only work if you have a site logo uploaded here: https://docs.generatepress.com/article/adding-header-logo/
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

Is it possible to somehow remove the bottom navigation bar?
Edited the CSS here: https://generatepress.com/forums/topic/buttons-location-in-mobile-navigation/#post-569213
Let me know.
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?