Archived topic

Breakpoint - Conversion Menu to a Dropdown Menu

11 replies · Started by Javi on July 8, 2017

Viewing posts 1–12 of 12

July 8, 2017 at 6:08 am #346013

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.
Regards

July 8, 2017 at 8:37 am #346055

Hi 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 #346370

Hi 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,
Javier

July 10, 2017 at 12:15 am #346806

Instead 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 #346863

Hi 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 :s

July 10, 2017 at 9:41 am #347088

Can you try the updated code?: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

July 11, 2017 at 2:35 am #347520

Hi 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 #347718

It 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 #347831

Hi 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 OK

This 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 #347994

Try 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 #348064

This 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 #348245

Thank you! I really appreciate that :)

This archived topic is closed to new replies.

Start building better websites today.