- This topic has 11 replies, 3 voices, and was last updated 6 years, 8 months ago by Tom.
-
AuthorPosts
-
July 8, 2017 at 6:08 am #346013Javi
Hello Tom,
This is my first post and I would like to congrats you for this amazing theme! It is great! π
I am pretty sure this question has been answered somewhere, but I can’t find it.
Well, I am not a professional developer, but I really enjoy web design at a basic level. Now I am trying to figure out how can I change the breakpoint when the Dropdown menu appears.
If you check http://www.chuchesxiana.com you can see that there are 3 menus before the dropdown menu appears (1 row, 2 rows, and 3 rows). I would like to not have the “3 rows” menu. Instead, the dropdown menu should appears at this point.
I don’t know if I am being clear, but I hope you can understand me!
Thanks very much in advanced.
RegardsJuly 8, 2017 at 8:37 am #346055LeoStaffCustomer SupportHi there,
This should help: https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width
July 9, 2017 at 4:39 am #346370JaviHi Leo, thanks for your help.
I have done it, but I still have a problem.
I have 3 menus now: (1) laptop, (2) tablet, and (3) mobile phone. If you can have a look at http://www.chuchesxiana.com you will realize that the (2) has two rows: one with the logo and another one with the dropdown menu. How can I have both in the same row?
I think one solution could be removing the (2) and start the (3) in a bigger width, but it is not working in the CSS you have provided me. I am missing something. What can I do?
Kind regards,
JavierJuly 10, 2017 at 12:15 am #346806TomLead DeveloperLead DeveloperInstead of the above code, it may be better to initiate the mobile header at a custom width: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043
July 10, 2017 at 3:16 am #346863JaviHi Tom,
It is not working.
I have 1000px instead of 768px and you can see the result here.
I guess there is a conflict between different CSS codes. I tried to change different properties but I can’t figure it out :sJuly 10, 2017 at 9:41 am #347088TomLead DeveloperLead DeveloperCan you try the updated code?: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043
July 11, 2017 at 2:35 am #347520JaviHi Tom,
It is not working yet. I still have three menus. Now you can see that the “tablet” resolution one has a really small logo. I am new in web design, I can not figure out why there are still 3 menus even though I use the code.I guess I should modify the CSS patterns of the CSS code you have provided me.
Thanks for your help!
Javier
July 11, 2017 at 9:29 am #347718TomLead DeveloperLead DeveloperIt seems to be working for me? The mobile header initiates when you told it to: https://www.screencast.com/t/CAtnSmbgk6
I’m definitely not seeing 3 menus? Maybe I’m misunderstanding.
July 11, 2017 at 1:31 pm #347831JaviHi Tom,
I think I am explaining myself wrong, but with your screencast is easier for me:
(1) ‘Laptop’ resolution menu: OK
(2) ‘Tablet’ resolution menu: No Cart icon, logo’s quite small
(3) ‘Mobile’ resolution menu: Yes Cart icon, logo’s size OKThis is why I am saying there are “3” menus.
Sorry for bothering but I hope now it is clear!
July 11, 2017 at 11:58 pm #347994TomLead DeveloperLead DeveloperTry adding this into the mobile header CSS:
.mobile-header-navigation .main-nav ul li a, .mobile-header-navigation .menu-toggle, .mobile-header-navigation .mobile-bar-items a { line-height: 72px; } .mobile-header-navigation .mobile-header-logo img { height: 72px; } .mobile-bar-items.wc-mobile-cart-items { display: block; }
July 12, 2017 at 2:56 am #348064JaviThis is exactly what I want!
Thanks very much for your time and patience, I really appreciate it π
Donation on its way!
July 12, 2017 at 9:59 am #348245TomLead DeveloperLead DeveloperThank you! I really appreciate that π
-
AuthorPosts
- You must be logged in to reply to this topic.