problem with hamburger button's menu

Bootstrap Studio Help
1

Hi

in mobile view my site has some problems with hamburger buttons menu. it makes some problems some times and makes the site go messy, check out my site on mobile view please www.farafan-market.ir

it has some more problems too

and i can't make the top menu look good in different views.. any suggestions?

2

I use Chromes Dev Tool (F12) for debugging and I toggle on the "device toolbar" and I click the middle segments for mobile view. This is all related to that visual.

.module.all-categories .sj-flat-menu looks like it should have a z-index of at least 1091 to overlap the next 3 element

You have a DIV with the ID of search-results476 that is being set this style on the element from a script.

left: -220px;
top: 286px;
width: 260px;
visibility: hidden;

It what's pushing your page over onload some times, it doesn't always do it for me thought. I can get it to act up but switching to a different size and then clicking back on the mobile view segment.

It's the DIV that you use to display the dynamic search as you type dropdown.

You have jQuery errors on your site because you are including jQuery UI type scripts but also need to include jQuery it's self as well.

Sorry I don't understand the language of the top menu. So I can only give advice on what I see. It doesn't looks like there is much for the top menu so I'd suggest instead of splitting it in to 2 menus just make it 1 menu either left or right aligned so that in mobile view you can fit it on 1 like.

OR

You can add the following change that will sort of do that for you.

  • add class no-xs-gutter to the DIV .container in the section id="yt_top"
  • add class col-xs-4 to id="top-left"
  • add class col-xs-7 to id="top-right"
  • remove @media (max-width: 480px){ .rtl #yt_top #top-right { float: none; } }
  • remove .rtl #yt_top #top-right { float: left; }
  • remove float:none from @media (max-width: 480px){ #yt_top #top-right { float: none; text-align: center; } }
  • set padding to padding:4px 7px; on @media (max-width: 480px){ #top-right ul.menu li { float: none; padding: 4px 17px; border: 0 none; } }
  • remove @media (max-width: 480px){ .rtl #yt_top #top-left { float: none; } }
  • remove .rtl #yt_top #top-left { float: right; }
  • remove float:none from @media (max-width: 480px){ #yt_top #top-left { float: none; text-align: center; border-bottom: 1px solid #ddd; } }

And then add CSS

@media (max-width:768px){
    .no-xs-gutter > .row {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width:768px){
    .no-xs-gutter ,.no-xs-gutter > .row > [class^='col-'] {
        padding-left: 0;
        padding-right: 0;
    }
}

Just a suggestion :)

The coding for this site doesn't look like it was built with the Bootstrap Studio app that this forum is related to.

Not sure how much more help I'll be able to give you.

Saj