Archived topic
How do i move my menu button on mobile?
10 replies · Started by stefanie on January 25, 2021
Hi there,
Is it possible for me to put my menu button in the very top bar of my website on mobile version only. As it is, I have social media buttons there, which I would like to move down to below my logo bar. I only want these changes to show up on mobile though if possible. Here 's my URL so you can see what I mean. If you check it on mobile you will see that the menu doesn't look right where it is
I also have another question please.
I currently build my landing pages in Aweber, which can only be added to posts not pages. I would like my homepage to be more like a landing page and I'm wondering if I can create this on Generate Press, or if I should create it on Aweber, which would mean I would have to make my homepage a post rather than I page in order to get my landing page published on there. I don't even know if this is possible. How do people create these great landing pages on their websites for the homepage please? Here's an example of what I would like to do. Thanks
Hi Stefanie,
Try this CSS to reach the layout:
@media (max-width: 768px) {
body {
display: flex;
flex-direction: column;
}
#site-navigation {
order: -2;
}
#masthead {
order: -1;
}
}For the 2nd question, you can build a custom home page by using our plugin GenerateBlocks and WP show posts.
https://wordpress.org/plugins/generateblocks/
https://wordpress.org/plugins/wp-show-posts/
Let us know if you need further assistance.
Hi there,
I appreciate your information, but you're dealing with a dummy here. What am I supposed to do with this CSS please? I don't have enough information from you I'm afraid. I have copied and pasted it into the additional CSS bit, but not sure what it is supposed to do. I still don't have the option to move my menu up to the very top bar of my website. The only option I have is 'above header' which isn't high enough. I would like the menu to go right at the very top on the left hand side like it does on most other peoples mobile phone websites.
Weirdly, I have now lost all my social media buttons since I added that CSS.
Help please!
Thanks
Hi Ying,
actually forget my last message please because I have now got the social media icons where I want them. However, this has taken my white strip away that I had at the top of my website above the header. I wanted the menu in a white strip along the very top. As it stands, it's now all green and looks weird. Please can you check my website on mobile and you will see what I mean. Thanks
Hi Stefanie,
Just to confirm, you want to make this part white?
https://www.screencast.com/t/W1tbH2ycMOpO
Can you also disable your caching/minifying plugins so I can see the CSS that's already been added?
Thanks :)
Hi Leo,
Yes, that's the part I would like to make white thanks,
I'm just about to go to sleep and don't want to disable my plugins for the whole night, so can I get back to you tomorrow about it?
Thanks so much!
Try this CSS:
@media (max-width: 768px) {
.inside-navigation .menu-toggle {
background-color: #ffffff !important;
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Hi Leo,
Everything seems to be working fine now thanks.
Just one other thing. I've noticed thee is an option to 'combine CSS' in general settings. What is this please? And should I tick it?
Thanks
Any chance you can open a new topic for a separate question?
Thanks :)
Hi Leo,
yes of course, sorry.
Thank you :-)
No problem :)
