Mobile problems

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:

https://presscustomizr.com/snippet/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:

https://toxicvideos.pt/habitoinercia/

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