Support » Theme: Customizr » Mobile problems

  • Hi!

    These are 2 mobile related problems:

    1- My mobile menu wont close after hitting a link to the same page. (I have customized links to anchors on the same page). How can I solve this?

    2- I would also like to have in my widget-footer area a padding like those in the other elements on the page. I cant figure what class to change in CSS to add a padding. Also there is a slightly horizontal overflow that I would like to eliminate.

    This is 1 desktop related problem:

    1- How can I have a full-width element without padding or margin (like a row with text) inside a container with padding or margins and keeping all responsive?

    You can see the site under construction in:

    Hábito e Inércia

    Thank you for your kind attention!

Viewing 15 replies - 1 through 15 (of 15 total)
  • Hi,
    Can we sort these one at a time.

    Desktop problem:
    Full-width element without padding or margin inside a container seems contradictory.
    Please show a screenshot and explain, will you? I am not very clear as to your need.

    Hi Menaka!

    Im solving that issue following this:

    Display full-width pages

    I achieved my goal to make the bars with titles full-width. But Im getting a slightly horizontal overflow. If I put 98% in width for the .container I get rid of the overflow but I lose the full-width for the bars.

    You can see the site in:

    Hábito e Inércia

    Thank you for your kind attention.

    Can someone help me with this issue?

    My mobile menu wont close after hitting a link to the same page. (I have customized links to anchors in the same page). How can I solve this?

    Thank you!

    Hi,
    Can you tell which menu item is causing this. I tried with a few of the menu items, but I could not reproduce the issue. If you can tell the exact sequence of events to reproduce the issue, it would help in understanding the problem.

    Hi Menaka

    The site has 2 pages: Homepage and Serviços

    Imagine that you are in Homepage and you click on the menu expandable button. The menu expands and all pages and links appears. If you click on a link (custom link to an anchor, example: Equipa) that is located in the same page (homepage) the menu that is expanded dont automatically close as it should if you hit a link to another different page (Serviços).

    Thank you Menaka for your attention.

    Hi,
    I think it is the expected behaviour. When a click moves within the page, the menu does not collapse. When a click loads a new page, the menu collapses.

    I think it is the expected behaviour

    I am curious:
    Why do you think the behaviour of a menu should depend on the target of the menu-item?

    Well Menaka,

    Expected or not, I still got a problem to solve because the menu does not collapse. How can the user know if the link hit the target?

    If this behaviour is expected then I think the menu is badly designed, otherwise we are facing a flaw here that must be fixed.

    Rengeiw has made the point here: the behaviour of a menu should not depend on the target of the menu-item!

    I would like to remind that this issue apllies only to small viewports (smartphones).

    So I kindly ask you to guide me in a way to make the menu collapse.

    Thank you!

    Hi,
    I see the same behaviour on desktop too. Am I missing something?

    Hi Menaka

    Indeed. When I wrote that this issue apllies only to small viewports (smartphones), I meant the fact that the user could not possibly know if the link hit the target.

    But the behaviour is the same in mobile and desktops. The difference here is that in desktop we could see the link work (hitting the target).

    Is there a way to solve this through CSS, PHP or other?

    Thank you for your kind attention

    Hi,
    This seems to be an issue with bootstrap.
    Check this out. https://github.com/twbs/bootstrap/issues/12852

    Flagging to developers.

    Hi Menaka!

    Any news about this issue? Is it solved?

    Thank you for your support!

    Hi,
    You can try including the snippet given in the bootstrap github comments.
    I haven’t tried it though.

    Hi Menaka

    I added this piece of code to the bootstrap.js file and now is working:

    $(document).on(‘click’,’.btn-toggle-nav.in’,function(e) {
    if( $(e.target).is(‘a’) && $(e.target).attr(‘class’) != ‘dropdown-toggle’ ) {
    $(this).collapse(‘hide’);
    }
    });

    Hi Menaka

    I was wrong. The snippet didnt work.

    Could you lend me a hand here?

    Thank you for your kind attention

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Mobile problems’ is closed to new replies.