Image background truncated with JA masthead

toonetcreation

aman204 wokrs partially.
with big window size you can see this :

But if you reduce windows size or if you use a smaller resolution , you see this (a blank space appears on the top of masthead) :

Ninja

toonetcreation
Hi
kindly change the property to cover

.t3-masthead .ja-masthead {
    background-size: cover;

}

if any issue, kindly let me know which mobile device you will the issue as i tested it works fine in PC with different screen size.

toonetcreation

Ninja ok done, but picture is again truncated on left and right on some resolutions :

1280x1024
1366x768
etc...

Ninja

toonetcreation
Hi
That is because of the height value
min-height: 456px;
Either remove it or you need to apply it for different resolution as this custom code you added is making the image truncated.


@media(max-width:1366px) and (min-width:1280px){.t3-masthead .ja-masthead {
    min-height: 206px;
}}

Set height as per needs.

Regards

toonetcreation

Ninja image is truncated horinzontally, not vertically.

I have removed min-height: 456px;and problem still the same.

I need to display the image with full width for all resolutions.

Ninja

toonetcreation
Hi
Kindly check my last suggestion and apply it.
I tested it for your site and there is no issue,
Please apply and test first

toonetcreation

Ninja I did it but when I test with a resolution like 1295 I get this :

Ninja

toonetcreation
Hi
This is not from masthead the size of the menu item does not fit all menu in same row so it goes into 2nd row. and it push the masthead down.
This is the code that push it down

.t3-header-wrap.header-dark.has-hero {
    margin-bottom: -96px !important;
}

You need to increase its value using speific media queris
Different value for different size.

toonetcreation

Ninja Ok I see about the 2nd row.
I have seen that mobile menu is display from 992px
How can I set it to start from higher resolution like 1024px?

teitbite

toonetcreation Hi. Please try add this to css:

@media only screen and (max-width:1024px) {
.navbar-collapse.collapse { display: none !important; }
.navbar-header { display: block !important; }
}

toonetcreation

teitbite works partially.
main menu is hidden but mobile menu not displayed.
you can try on line if you want.

Ninja

toonetcreation
Hi
You can change the menu breakpoint from the /less/Variable.less file .

Find

// Point at which the navbar stops collapsing
@grid-float-breakpoint:     @screen-md-min;

Replace it with

// Point at which the navbar stops collapsing
@grid-float-breakpoint:     1024px;

Then compile Less to Css .

kindly take backup of site before compile less to css .

LESS to CSS will override your style changes in css files .

toonetcreation

Ninja Ok I will try this and I come back to you.

Just another info : if I use custom.css file into local/css folder, doing compile les to css is not necessary into template settings (except on this case) ?

toonetcreation

Ninja same issue, mobile menu is not displayed from 991px to 1331px

teitbite

toonetcreation Hi. No it's not. It can be done either in custom.css or in less as mentioned by Pankaj. To use the case I've mentioned, try a higher priority selectors like:

@media only screen and (max-width:1024px) {
body .navbar-collapse.collapse { display: none !important; }
body .navbar-header { display: block !important; }
}

toonetcreation

teitbite I have tried your solution and mobile menu is not displayed from 991px and above.
menu mobile is only displayed from 991px and below resolution.
and what I need is to displayed it from 991px to 1331px

teitbite

toonetcreation Hi. Can You please provide an access to joomla panel. I'll try to add the code myself.

toonetcreation

teitbite ok I have edited first post with details.

teitbite

toonetcreation Hi. Thank You. I was able to check that You must have some kind of server cache enabled since any changes placed to /local/css/custom.css are visible instantly or showing in this file if accessed directly. It should be fine when cache will be released. I've replaced the code to:

@media (min-width: 1025px) {
body .navbar-collapse.collapse { display: block !important; }
}

@media only screen and (max-width:1024px) {
body .navbar-collapse.collapse { display: none !important; }
body .navbar-header { display: block !important; }
}

works on my copy.

toonetcreation

teitbite there is no cache on joomla website and also no cache on hosting platform.
so why 2 menus are displayed?

saguaros

toonetcreation
Hi,

You should remove above CSS code as it will show 2 menus.

To display the off-canvas menu in that screen size, you can follow the suggestion from pankaj to change the breakpoints via the variables.less file.

In case that you want to use CSS, you can try with this:

@media (max-width: 1331px) {
 .off-canvas-toggle.hidden-lg.hidden-md {
    display: block !important;
}   
}

teitbite

toonetcreation Hi. As I said before. You have a server cache enabled and files are not being refreshed. When You go directly to www.domain.com/templates/ja_mixstore/local/css/custom.css You cannot see any changes to this file, even if I placed the style at the very top of it. Please clear cache to see the changes.