- This topic has 16 replies, 3 voices, and was last updated 4 months, 1 week ago by
David.
-
AuthorPosts
-
September 4, 2020 at 8:25 pm #1431414
Shami
I just wished if the mobile menu icon looked something like copyblogger.com
Is it possible to achieve that? Because right now that mobile icon looks too simple and hardly grabs any attention.
September 4, 2020 at 9:18 pm #1431447Elvin Customer Support
Hi Shami,
You can start by trying to replicate the font style looks through WP Admin > Appearance > Customize.
For font color:
go to Color > Primary Navigation.For layout:
go to Layout > Primary Navigation.For typography:
go to Typography > Primary Navigation.For other styles that can’t be achieved through this, you can use WP Admin > Appearance > Customize > Additional CSS.
Let us know if it works for you.
A wise man once said:
"Have you cleared your cache?"September 4, 2020 at 9:28 pm #1431455Shami
I don’t really want to replicate it. That was for reference. I want to make the icon look like button in mobile. I guess it can’t be achieved with the current available options in the Customize.
It’ll probably require additional css.September 4, 2020 at 9:32 pm #1431456Shami
It should stand out like a button.
September 5, 2020 at 4:12 am #1431681David
StaffCustomer SupportHi there,
try this CSS:
#mobile-header .menu-toggle { line-height: 45px; border: 2px solid #000; /* Change #000 for border color */ border-radius: 45px; margin-right: 0.8em; background-color: #f00; /* Change #f00 for background */ color: #fff; /* Set text and toggle color to white */ }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 5, 2020 at 6:45 am #1431816Shami
That looks good. It just has padding issue. Even after doing changes in the layout settings, the padding just won’t work. The border touches the edge of the screen on the right. How do I fix it?
The only CSS I used earlier was:
@media (min-width:769px) {
.site-branding {
display: inline-block;
}.site-logo {
float: left;
margin-right: 20px;
margin-left: 10px;
}I used this css to make the logo and the menu in a single line.
September 5, 2020 at 7:06 am #1431840David
StaffCustomer SupportI updated the CSS here to include some margin-right
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 5, 2020 at 7:19 am #1431854Shami
That worked. Thanks a lot. I want to add divider lines between each menu item in mobile. Is it possible?
September 5, 2020 at 7:28 am #1431861Shami
Also, I just observed another problem. When I try to increase the font size of primary navigation in mobile, the menu icon stacks below the site title due to responsiveness. Any fix?
Please note that this only happens when the site title font-size is increased. I decreased that a little and this issue is fixed.So now I just have to add the lines between mobile items to separate them as it looks so plain in design.
September 5, 2020 at 8:13 am #1432033David
StaffCustomer SupportThe only fix to stop things from wrapping to a new line, without removing padding, is to reduce the font size – like you did for the Site Title – you can do the same for the Primary navigation.
Try this CSS:
#mobile-header li { border-bottom: 1px solid #000; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 5, 2020 at 8:18 am #1432036Shami
Looking good. I just have to add margin from both sides. As the border is from edge to edge.
September 5, 2020 at 8:21 am #1432037Shami
I added this:
margin-right: 35px;
margin-left: 35px;It’s looking good now.
The last part: How to fill the menu box with color? I mean inside the border of menu icon only. Plus I want to make the ‘menu’ color white and surround it with a dark solid color.
September 5, 2020 at 8:43 am #1432065David
StaffCustomer SupportI updated the CSS here:
https://generatepress.com/forums/topic/how-to-display-menu-icon-in-mobile-as-button/#post-1431681it includes comments for each of the colors.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 5, 2020 at 8:51 am #1432072Shami
Thanks David. One last thing, I want to do the same border thing for sub menu toggle. I really appreciate your awesome support.
September 5, 2020 at 9:00 am #1432080David
StaffCustomer SupportTry this CSS:
#mobile-header .menu-item-has-children .dropdown-menu-toggle { border: 1px solid #000; background-color: #f00; color: #fff; border-radius: 50px; line-height: 50px; width: 50px; padding: 0; text-align: center; margin-right: 10px; } #mobile-header .main-nav > ul > li.menu-item-has-children>a { display: flex; align-items: center; justify-content: space-between; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.