[danieltmjr]

danieltmjr

#10631

I bought infinite scrolling to try to remove a black stripe that stays fixed at the bottom of my screen and that when I scroll the page it accompanies the page that causes a poor viewing of the page. How do I remove this black stripe?

[Syahir Hakim]

Syahir Hakim

#46537

It appears that you have the following code in your child theme’s style.css file:

.footer-inverse {

background: #181e1f;

color: #76797f;

position: absolute;

left: 0px;

right: 0px;

bottom: 0px;

z-index: 99999;

}

Try to delete the positioning properties so it becomes like this:

.footer-inverse {

background: #181e1f;

color: #76797f;

z-index: 99999;

}

[danieltmjr]

danieltmjr

#46538

Thanks for replying, I changed the CSS but everything goes as before. Below is a part of my code after the change.

Taking advantage of this email another question: is it possible to change the size of the top bar so that it is narrower, less wide?

/* =Footer



*/



.footer-inverse {

background:  #181e1f;

color: #76797f;

z-index: 99999;



}



.footer-lg {



padding-bottom: 30px;



border-bottom: 1px solid #333;



}



.footer-lg a {



color: #fff;



font-weight: 600;



}



.footer-lg .item {



margin-top: 30px;



}



.footer-lg .item-title {



text-transform: uppercase;



font: bold 12px Montserrat, 'Open Sans', sans-serif;



margin-bottom: 30px;



}



.footer-lg .form-control {



box-shadow: none;



}



.footer-lg ul {



padding: 0;



}



.footer-lg li {



padding: 0;



list-style: none;



margin-bottom: 10px;



}



.footer-lg li .post-title {



margin-bottom: 0;



}



.bottom-bar {



padding: 25px 0 10px;



}



.footer .container > .row {



margin-top: 0;



}



.footer-menu-wrapper {



background: #23527C;



margin-top: -1px;



}



.footer-menu {



margin-bottom: 0;



padding-top: 5px;



padding-bottom: 5px;



}



.footer-menu li {



list-style: none;



display: inline-block;



}



.footer-menu li a {



display: block;



padding: 5px 7px;



color: #fff;



font-weight: 600;



}



.footer-menu li a:first-child {



padding-left: 0;



}



.bottom-bar .copyright {



margin-top: -10px;



}



.bottom-bar .copyright-text {



margin-bottom: 0;



}



.social-links {



margin: 0;



}



.social-links li {



display: inline-block;



font-size: 24px;



line-height: normal;



margin-left: 15px;



}



.social-links li:first-child {



margin-left: 0;



}



.social-links li a {



color: #76797f;



-webkit-transition: color 0.2s;



-moz-transition: color 0.2s;



-o-transition: color 0.2s;



transition: color 0.2s;



}



.top-bar .social-links li a {



color: #AACAE7;



}



.social-links li a:hover {



color: #000;



}



.footer .social-links li a:hover {



color: #fff;



}



/* =Other plugins and add-ons



*/

[Syahir Hakim]

Syahir Hakim

#46539

To adjust the top bar width, add the following CSS code in your child theme’s style.css:

@media (max-width: 767px) {

.navbar {

width: 90%;

margin-left: 5%;

}

}

[danieltmjr]

danieltmjr

#46540

Why are the changes I made in my child theme style.css file unrecognized and have no effect?

I made all the changes suggested in this post and nothing happens.

[Syahir Hakim]

Syahir Hakim

#46541

Which style.css file did you made the change in? It should be the child theme’s style.css, not the main style.css file in the Franz Josef theme. Let me know your site URL as well so I can take a look.