[Resolved] Breakpoint – Conversion Menu to a Dropdown Menu

Home Forums Support [Resolved] Breakpoint – Conversion Menu to a Dropdown Menu

Home Forums Support Breakpoint – Conversion Menu to a Dropdown Menu

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #346013
    Javi

    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

    #346055
    Leo
    Staff
    Customer Support
    #346370
    Javi

    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

    #346806
    Tom
    Lead Developer
    Lead Developer

    Instead of the above code, it may be better to initiate the mobile header at a custom width: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

    #346863
    Javi

    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

    #347088
    Tom
    Lead Developer
    Lead Developer
    #347520
    Javi

    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

    #347718
    Tom
    Lead Developer
    Lead Developer

    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.

    #347831
    Javi

    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!

    #347994
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #348064
    Javi

    This is exactly what I want!

    Thanks very much for your time and patience, I really appreciate it πŸ™‚

    Donation on its way!

    #348245
    Tom
    Lead Developer
    Lead Developer

    Thank you! I really appreciate that πŸ™‚

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.