Where to change size of banner top module

mberwing

H there,
which css file need to be changed to reflect the size of the Banner Top - Banner module
for JA Allure on Module position: banner-top
As per documentation the suggested image size is 728x90px but our image size is larger and is 728x180px

The top menu should obviously be adjusted accordingly so that it matches with the design and position in the template ...therefore I assume I would also change the position on this one too.

Thanks

Ninja

mberwing Hi
The image will be auto resize with respect to container size.
You can give me URL of page if its not showing well, i will check and suggest you changes based on the module.

Regards

mberwing

Hi Pankaj
thanks for fast reply....I have to make a correction.

I made a mistake and it is not about module banner-top but about the topbar background picture which is located under templates/ja_allure/images/topbar-bg.jpg

I need the actual size of our top banner to be used so that the entire picture is shown which is not the case here.

I have updated with URL and login credentials.

Please note that the page is offline....since we are still in development mode. Feel free to put it online in backend config so that you can test and please the set it back to offline.

Thanks for your support

Markus

Ninja

mberwing
Hi
The actual size of the banner will be 1188px. I saw you are still using the low size image
you can add a bigger image and it will fill the space automatically.

mberwing

Hi Pankaj,

the size of the image topbar-bg.jpg was 1902px x 400 px and it is not working.
I have made some further tests on my iMac 27'' and further increased the size to 3000px x 625 px.
It indeed will fit the space automatically but only with the width but not with height that is always fixed.

There is only one size on the screen when the topbar-bg is more or less perfect and logo on left side is perfect and completly visible. But when you enlarge the screen banner is cut on the top and bottom.

Ninja

mberwing
Hi
Kindly post screenshot of issue and let me know how you want it.
As in first post you mention about the banner module and now the backgroud image.
Both are different places.
This is banner module http://prntscr.com/pa79hp that already using the max width of image.
On the topbar there is no banner module.
There is only Bg image behind the header http://prntscr.com/pa7a5i

mberwing

Hi Pankaj,
as you can see in my second update I have confirmed that I made a mistake and it is not about module banner-top but about the topbar background picture which is located under templates/ja_allure/images/topbar-bg.jpg.

See my issue recorded here:
https://drive.google.com/open?id=1a1Hxqrp9U3wKUItm9BdIqJFJMS-XSvHY

Hope my problem is now clear.

I unfortunately cannot make any corrections / changes in the header line of this post....maybe you can.

Ninja

mberwing
Hi
Its normal when resize the screen the content will adjust with respect to the present screen size.
As image is in the background, Add this code in custom.css file to add min height value for header so you can see complete BG image behind header

.t3-header {
   background-size: 100%!important;
 min-height: 300px;
}

mberwing

Hi,
perfect....this worked fine now on my iMac with the large screen but it unfortunately screws up the design on mobile devices with smaller screen resolution. For example on my iphone I can now see the same bg image 5 times. Not sure I can change something in Responsive Layout (medium, small, extra small) in Styles or any additional entry in custom.css to accomodate this problem.

Furthermore is there a way to also change the top menu which is not longer overlapping (half of the bg picture) but it is now below bg picture.

Thanks

Ninja

mberwing
Hi
replace the code is shared in last post with this code

@media(min-width:468px){
.t3-header{background-size:100%!important;min-height:300px;background-repeat:no-repeat}}

mberwing

Hi,
now it is almost perfect...thanks so much.

See now the current situation:
https://drive.google.com/file/d/1ShfpoXRWxJXXZB7SzZAlNWRVF0SsUuk6/view?usp=sharing

There is a gap/space between bg image and top menu when the Browser size is between ~ 400 - 1430px screensize and is becoming larger before it switches back below 400 px.

I would be happy if we could achieve that the top menu is 50% overlapping with the bg image and fixed at this position any time what the screen size is - same way it is in 'default' JA Allure template

Ninja

mberwing
Hi
Kindly check in 1430px width there is no issue http://prntscr.com/pak7gu
About height you can change the width value till which you want to show the image at 300px


@media(min-width:468px){.t3-header{background-size:100%!important;min-height:300px;background-repeat:no-repeat}}

change 468px to bigger value and the code will not work below that size.

mberwing

Hi,

thanks .... I tested this further with the gaps/spaces and it is so far ok.

But the issue with the top menu is still not fixed.
Interestingly it depends what Browser version you use...... with Safari the top menu is 50% overlapping with the bg image ....but it is not the case with Chrome or Firefox.

See screenshot

Ninja

mberwing
Hi
If you want overlapping use this code

.t3-mainnav {
    margin-top: -24px;
}

Set the media queries as per needs, on which screen sizes you want this style.

mberwing

Hi Pankaj,

GREAT.....all is fine now and my issue(s) are resolved.
Thanks so much for the fantastic support and fast replies ...much appreciated to get such great service.

Cheers
Markus