Problem with topbar and slideshow home in Lawfirm template

mikyilfilosofo

teitbite Hi! This site is still under construction. At the moment I'm working only on topbar and slideshow. I didn't change any file.
Cheers

Ninja

mikyilfilosofo
Hi
There are any css changes are added in custom.css file that making slideshow font bigger and height changes with some module overlap on it.
You can check the custom.css file for your custom changes
example


#acm-slideshow-89 .slider-content-inner.container::before {
    content: url(/03cedimnewtemplate/images/logo-CEDIM-solo-simbolo-3D-150px.png);
    margin-top: 185px;	
}
/*4 immagini anteprime articoli*/
#acm-features-129{
    margin-top: 285px;
}
/*evita che le scritte sullo slideshow siano tagliate*/
.itemid-101 .slider-content-inner.container{
	height: 750px;
}
/*aumenta altezza slideshow in cima home*/
#acm-slideshow-89 .swiper-slide.swiper-slide-active{
    height: 460px;
}
/*rimpicciolimento titolo "CEDIM..." su slideshow in cima a home*/
#acm-slideshow-89 h1::before{
    font-size: 66px;
	letter-spacing: 4px;
}
/*rimpicciolimento titolo "...Trib..." su slideshow in cima a home*/
#acm-slideshow-89 h1{
    font-size: 58px;
}
/*rimpicciolimento sottotitolo "Associazione per ..." su slideshow in cima a home*/
#acm-slideshow-89 p{
    font-size: 22px !important;
}

Once you temp. remove the codes there is no issue.

Regards

mikyilfilosofo

Ninja Hi!
Sorry, I do not know what you mean. I'm building this site and I'm writing the custom.css file, but I have problems for screens of 990px of width and of 870px of width. Do you mean to say that I caused the error by writing these CSS lines? What should I modify in custom.css?
Thanks!
Cheers

teitbite

mikyilfilosofo Hi. Yes, I'm afraid this cannot be done this way. If You wish to do changes to css for certain screen widths You will have to use it wrapped in a code like:

@media only screen and (max-width:870px) and (max-width:990px) {

}

so it will only affect the width needed.

mikyilfilosofo

Hi! Thanks for your answer!
Unfortunately I have already written several media queries, but if I raise the slideshow, or one of its internal tags, they overlap the topbar strip at the top. In this way the contents of the strip are completely covered. I can not avoid this problem in any way, because at greater widths, it does not happen. Yet the CSS code of other mediaqueries of greater widths seems the same. The overlap I can't avoid even using the "z-index" rule.
Cheers

Ninja

mikyilfilosofo
Hi
Your last reply is not clear.
In Custom.css file you added the code that work for all screen size devices this is reason you are getting a different view.
If you want to apply a custom code on your site for a specific screen size you need to add media query
For example this code

/*evita che le scritte sullo slideshow siano tagliate*/
.itemid-101 .slider-content-inner.container{
	height: 750px;
}
/*aumenta altezza slideshow in cima home*/
#acm-slideshow-89 .swiper-slide.swiper-slide-active{
    height: 460px;
}

You want this code to work only for specific screen size

@media(max-width:600px) and  (max-width:990px)
/*evita che le scritte sullo slideshow siano tagliate*/
.itemid-101 .slider-content-inner.container{
	height: 750px;
}
/*aumenta altezza slideshow in cima home*/
#acm-slideshow-89 .swiper-slide.swiper-slide-active{
    height: 460px;
}}

It will work between the screen size mentioned in code. So you can define new code for different screen size devices.

mikyilfilosofo

Ninja
Hi!
Maybe I can't explain myself. I have already made extensive use of media queries. If you look at the custom.css file of this website in costruction that I attach to this message, you can see that the last lines are all media queries.
If the problem were solved by media queries, I would not have asked for support, but I would have consulted the documentation on their use. The problem is which CSS rules to insert into media queries.
Thanks!
Cheers!

custom.zip

7kB

Ninja

mikyilfilosofo
Hi
As i shared in previous posts the problem is not from template. its from the custom code you are using.
You need to remove or adjust it
for example one code

.topbar-left{
	height:40px !important;
}

This will make the topbar left height 40px for all screen size and in mobile its breaking the style as 40px is too low.
either remove it as add the code using media query to apply it for a specific screen size.

@media(max-width:1400px) and  (min-width:990px){.topbar-left{
	height:40px !important;
}}

This way you need to apply all the codes you added for different sceeen size.

mikyilfilosofo

Ninja
Hi!
I entered your CSS code, but the problem remained the same as before.

@media(max-width:1400px) and  (min-width:990px){.topbar-left{
	height:40px !important;
}}

Ninja

mikyilfilosofo
Hi
It seems you are understanding that the problem is from the code you added in custom.css
its still same http://prntscr.com/pb4jl9
I suggest you to remove the code and add it one by one so you can see this. And you can re code it for each screen size.

mikyilfilosofo

Hi!
At row n.11 of custom.css, I commented this CSS rule:

/*
.topbar-left{
	height:40px !important;
}
*/

And at the end of custom.css, as last lines, I wrote this:

@media screen and (min-width:880px) and (max-width:991px){
.topbar-left{
	height:40px !important;
}
}

And nothing has changed. Do you suggest to make other similar attempts?
Although I have written CSS rules that are always valid, because without mediaquery with screen width, there should be no problems. In fact, if I add mediaquery to the end of the custom.css, they will overwrite the previous ones. The problem is that when I write new mediaqueries at the end of the customc.css the problem remains the same.
I don't know if I understood what you meant.
Thanks

Ninja

mikyilfilosofo The problem is that when I write new mediaqueries at the end of the customc.css the problem remains the same.

You need to re write complete custom code you have, as its issue form all custom work you applied, it work for all screen sizes.
By the way the topbat is showing fine in mobile now http://prntscr.com/pb52os

mikyilfilosofo

Ninja Hi!
OK, I do the tests and then I inform you

mikyilfilosofo

Ninja
Hi! I disabled completely custom.css file.
Completely eliminating the custom.css file, it seems that the problem remains the same, when the screen width falls below 991px. The slideshow is lowered and does not go up, because it is locked by the menu bar hamburger icon.
Please see attached screenshot to see what I get, thanks!

Ninja

mikyilfilosofo
Hi
This is not a problem, its by design the transparent view style is till 992px screen and after that topbar use background. This happened for the menu when it collapse for mobile screen.

mikyilfilosofo

Ninja
I apologize, but several days have passed and I have not yet figured out how I can solve my problem.
Thanks

Ninja

mikyilfilosofo
Hi
I can help if there is problem, the view is normal on this, the mega menu collapse in this way and use different style and code. The same you can see in the demo.

if you want the header and topbar to be transparent you can use this code in custom.css file


@media (max-width: 992px) {
  .t3-header {
    background-color: transparent!important;
    z-index: 3;
    position: absolute;
    top: 52px;
  }
}

@media (max-width: 992px) {
  .ja-topbar {
    background-color: rgba(0, 0, 0, 0.4)!important;
    position: absolute;
    z-index: 2;
  }
}

mikyilfilosofo

Hi!
The custom.css is still disabled
I applied your style rules.
Then I completely deleted the "header#t3-header" bar, which is the one that contains the hamburger-shaped menu button and the lawfirm logo. In fact I thought that this bar would block the raising of the slideshow below it.
Then I tried to raise the ".wrap.t3-slideshow" slideshow section, but it doesn't rise in any way.
How can I put the ".wrap.t3-slideshow" slideshow section under the topbar and bring up the hameburger button on the menu?
If I delete the "header # t3-header" bar, the hameburger button in the menu also disappears.
Thanks

Ninja

mikyilfilosofo
Hi
I have no idea what you applied in last post.
If you only added the code i shared it will transparent the header and topbar. as in PC.
hope its clear now.

mikyilfilosofo

Hi!
Your suggestions works well! The mistake was mine, Thanks for your patience!
Probably, after the suggestion, the refresh with F5 of my Firefox didn't work, because also my CSS were not executed. So I refreshed several times and your commands worked.
I wanted to understand that I had applied your code that you shared, that is this:

@media (max-width: 992px) {
  .t3-header {
    background-color: transparent!important;
    z-index: 3;
    position: absolute;
    top: 52px;
  }
}

@media (max-width: 992px) {
  .ja-topbar {
    background-color: rgba(0, 0, 0, 0.4)!important;
    position: absolute;
    z-index: 2;
  }
}

The first problem is solved, thank you very much!
I would like to ask for help for a second problem: when the screen width drops to 900px, the thumbnails of the acm-features-129 module become too huge and the pagination is absent. At other screen width the dimensions are ok, but the pagination is still absent. Please look at the attached picture, with the comparison with the demo version of the template.
How can I solve it?
Thanks

Ninja

mikyilfilosofo
Hi
Kindly open a new thread for new topic questions as this thread is related with topbar and already solved.
It also helps our community members.
Thanks for understanding.