This is my problem too: https://kriesi.at/support/topic/mobile-menu-parent-items-open-submenu-and-dont-click-through/
There has not been a fix for this yet?

Thanks.

Look at this page.

View it at the screen sizes I quoted, between approx 1020px and 768px using Developer Tools.

The last tab title, then the second to last, get wrapped below the top ‘line’ as the screen width decreases, which looks poor because there’s no bottom border plus it’s not as clear as it could be which is the active tab when compared to standard desktop mode.

I can add a bottom border via the CSS I quoted in the OP which is better but I still think it looks naff if I do that – as does my client – so we want to vertically stack the tabs at a higher screen size than the Enfold default of 768px. Just need to know the correct element & media query to make this happen please.

Thanks Rikard

Not quite there …

1. The 3-bar menu is still showing bullet points (we just want 3 unbroken bars).

2. The 3 bar menu needs to be centered under the logo.

3. The logo is smaller in proportion than on the desktop version of the website. Is it possible to make it wider and with some white space underneath (between logo and 3-bar menu)?

Best
Gerry

Hello.

Thank you. That code works nice but there are some styling issues.

1. When I type something and results are displayed, whole field is pulled down. It would be great to have resluts field apeared over menu and page content.
2. In normal situation when I click outside search field or results field, that field should disapear. Right now it stays until I refresh page.

3. I would like to center my search field and make it a bit bigger/wider. I have code like this now:

.sub_menu {
top: 0;
left: -50%;
}

but Im not sure if this is correct (-50% place it to far left) and I can’t find proper class to make field wider.

4. When you open that page on mobile phone (tested on iphone 6s), search field is smaller then search button. On desktop everything is ok. I have code extra code like that:

#header_meta {
    min-height: 40px;
    background: transparent;
}

Best regards
Maciej

It is not a plugin conflict, it is a problem in LayerSlider and/or Enfold.

I have deactivated all plugins and removed the additional CSS to test this out.

When the slider type is set to Responsive in LayerSlider Slider Settings with a canvas width and height of 700 px and 467 px respectively, all the slider images (which are all actually 700 px wide and 467 px high) are expanded to fill the layerslider_X div, which has values set of width: 863px; height: 576px;.

This is the Responsive HTML code from the page for a canvas width and height of 700 px and 467 px:
<div id="layerslider_7" class="ls-wp-container fitvidsignore ls-fullwidth ls-container ls-responsive ls-device-is-desktop" style="width: 863px; height: 576px; margin: 0px auto; position: relative; visibility: visible;" data-layerslider-uid="LSwkerzzlm5">

The classes .ls-wrapper.ls-bg-outer and .ls-bg are also incorrectly set at 863px and 576px.

If the slider type in LayerSlider Slider Settings is then changed to Fixed Size the layerslider_X div values are altered to a width of 700px and height 467px, and the slider images are correctly displayed as required/specified in the canvas Settings.

This is the Fixed Size HTML code, again for a canvas width and height of 700 px and 467 px:
<div id="layerslider_7" class="ls-wp-container fitvidsignore ls-fullwidth ls-container ls-fixedsize ls-device-is-desktop" style="width: 700px; height: 467px; margin: 0px auto; position: relative; max-width: none; visibility: visible;" data-layerslider-uid="LS851ya40rt">

The classes .ls-wrapper.ls-bg-outer and .ls-bg are also now correctly set at 700px and 467px.

Setting the slider to Fixed Size is of course useless because the slider does not display properly on a phone or tablet.

Whilst we have found a CSS workaround to allow Responsive mode to display as it should, so I don’t need any further help, I think this issue needs reporting to your development team to have them investigate and discover whether it is LayerSlider and/or Enfold that is causing the problem, and hopefully effect a proper fix without having to resort to CSS overrides.

/
Message to Jhon in Portuguese.
/
Olá Jhon, muito obrigadp pelo retorno. Sua ajuda é muito importante. O seu código funcionou. Troquei para 480. Mas tem um detalhe bem pequeno. O box branco que fica por trás da legenda precisa ficar um pouco mais afastado na base e no top do texto da legenda. Eu sei que a legenda está com um tamanho grande. Fiz isso para testar. Eu precisa ter um respiro maior na parte de cima e na base. Veja na imagem o que quero dizer. No meio da imagem tem a simulação de como queremos.

IMAGEM

View post on imgur.com

You can close the topic.

Thank you!