test
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • nsca Friend
    #205738

    Hello!

    Having a problem with menu in responsive versions (medium screen).

    How actually is:

    How should it be:

    As you can see, the menu looks disassembled. How can i resolve it?

    Thank you in advance


    1. Snap-2015-04-15-at-15.45.12
    2. problem
    Saguaros Moderator
    #567970

    Do you have any URL?

    Saguaros Moderator
    #733076

    Do you have any URL?

    nsca Friend
    #568068

    Yes, sorry:

    informeconstruccion.com

    Saguaros Moderator
    #568128

    Hi nsca,

    With the current number of menu items of the main menu, the width of the medium screen is not enough to display them all in one line so that it breaks down to the second line.

    Our demo has less menu item and it shows fine: http://demo.t3-framework.org/joomla30/index.php/en/

    As I can see that you’ve already customized style for the main menu, you can add additional style for this menu in medium screen. You can use the media jQuery to add specific style for specific screen resolution. For example with tablet – medium screen:

    @media (min-width: 768px) and (max-width: 992px) {
    /* Your style goes here*/
    }

    nsca Friend
    #568266

    <em>@Saguaros 470112 wrote:</em><blockquote>Hi nsca,

    With the current number of menu items of the main menu, the width of the medium screen is not enough to display them all in one line so that it breaks down to the second line.

    </blockquote>

    Ok. But why my main menu are duplicated? How can i hide all the menu items in medium screen like this?:


    1. Snap-2015-04-25-at-01.16.58
    Saguaros Moderator
    #568279
    nsca Friend
    #568479

    Thank you for your answer.

    But im not using .less, please could you tell me where to change this?

    Saguaros Moderator
    #568783

    You can go to the file: ROOT/templates/css/custom.css (create this file if it doesn’t exist) and add this css rule:

    @media (min-width: 768px) and (max-width: 1024px) {
    .t3-navbar-collapse.navbar-collapse.collapse {
    display: none !important;
    }
    }

    Saguaros Moderator
    #733876

    You can go to the file: ROOT/templates/css/custom.css (create this file if it doesn’t exist) and add this css rule:

    @media (min-width: 768px) and (max-width: 1024px) {
    .t3-navbar-collapse.navbar-collapse.collapse {
    display: none !important;
    }
    }

    nsca Friend
    #568898

    Thank You Saguaros! You are the best!

Viewing 11 posts - 1 through 11 (of 11 total)

This topic contains 11 replies, has 2 voices, and was last updated by  Saguaros 9 years, 7 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum