Weird arrows appearing under slider

alanglotz · May 2015

Hi, I am using Slider revolution on my site at TexasPrivateWealth.com.

I am using the menu under the slider, and there are two arrows underneath. See screenshot. How can I get rid of these?

Note: These are not the same as the navigation arrows for the slider, which appear at the edges of the slider themselves. These are arrows that (see screenshot) are appearing BELOW the slider and the menu bar beneath the slider. They overlap the menu bar and the column underneath the menu bar.

Screenshot here: file:///Users/langlotz/Downloads/arrows.png

Albert · May 2015

Hi,

to remove those arrows, please use below css:

.content_slider.flat a.button { display: none; }

P.S. Screenshot from your local computer can't be checked by us.

alanglotz · May 2015

I added that to the custom CSS. The arrows are still there, faintly below the slider.

You can see them here: http://www.texasprivatewealth.com/

Albert · May 2015

Try with !important declaration instead then:

.content_slider.flat a.button { display: none !important; }

alanglotz · May 2015

That worked, they are gone, but now it is causing another problem: when the sticky menu drops down upon scrolling, the menu titles now come down onto the slider.

You can see the issue by going to TexasPrivateWealth.com. Scroll down, see now how the menu items are dropping out of the sticky header and going onto the slider, instead of staying on the sticky menu?

Albert · May 2015

This happened because of something else. You can fix it quickly within below css:

#Top_bar.is-sticky .logo { margin: 0 0 0 20px !important; }

alanglotz · May 2015

Even with that code, we are still having same issue. Can you help me trouble-shoot, please?

Here is all the CSS I have in the site CSS area:

#Top_bar #logo img { max-height: 100%;}

@media only screen and (min-width: 960px) {

#Top_bar #logo img { max-width: 190px;}

}

#Top_bar.is-sticky .logo { margin: 0 0 0 20px !important; }

#Top_bar #logo img { max-width: 600px !important; }

#Top_bar #logo { height: 200px !important; }

.page-id-1161 #ecommerce_ready .fancy_heading { text-align: left;}

.page-id-1705 { background: url(http://themes.muffingroup.com/betheme/wp-content/uploads/2014/06/wood-texture.png);}

.page-id-1748 .footer_action, .page-id-1748 .widgets_wrapper { display: none;}

.page-id-1768 #Footer { display: none;}

.page-id-1796 #Footer { background: #292929;}

.page-id-1796 .dark .list_item.lists_2 .list_icon i { color: #fff; }

.content_slider.flat a.button { display: none !important; }

Albert · May 2015

What problem you still got? We checked above css yesterday and everything was fine.

alanglotz · May 2015

Please go look at the site: texasprivatewealth.com.

Scroll down on the site. See how the menu items in the sticky menu are coming down onto the page and mixing with the text on the page? That is the problem.

Everything is not fine. This problem remains. Please let's fix it, okay? Thank you.

Albert · May 2015

We did it already and sticky works properly http://pasteboard.co/LOYRWTs.png

alanglotz · May 2015

Sorry, no. Same problem. Go to texasprivatewealth.com and scroll down. See screenshot below as proof.

http://pasteboard.co/SBi8RQ4.png

Same issue in Chrome/Firefox/Safari.

I am using most recent version of Be theme (just updated 5/31/15) and here is all the css I am using:

#Top_bar #logo img { max-width: 900px !important; }
#Top_bar #logo { height: 200px !important; }

@media only screen and (max-width: 700px) {
#Top_bar #logo img { max-width: 200px !important;}
}

#Top_bar.is-sticky .logo { margin: 0 0 0 20px !important; }

.page-id-1161 #ecommerce_ready .fancy_heading { text-align: left;}

.page-id-1705 { background: url(http://themes.muffingroup.com/betheme/wp-content/uploads/2014/06/wood-texture.png);}

.page-id-1748 .footer_action, .page-id-1748 .widgets_wrapper { display: none;}

.page-id-1768 #Footer { display: none;}

.page-id-1796 #Footer { background: #292929;}
.page-id-1796 .dark .list_item.lists_2 .list_icon i { color: #fff; }

.content_slider.flat a.button { display: none !important; }

Albert · June 2015

Probably this happen on smaller screens because you got too many menu items in header and in this case you should decrease number of menu items in header or you below css to decrease padding between menu items:

#Top_bar .menu > li > a span:not(.description) { padding: 0 4px !important; }

alanglotz · June 2015

Okay, that helped. Thank you, I did not understand the problem earlier, but your explanation helped.

Albert · June 2015

You're welcome

Weird arrows appearing under slider

Comments