Weird arrows appearing under slider

alanglotz

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

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

alanglotz

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

Try with !important declaration instead then:

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

alanglotz

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

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; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

alanglotz

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

alanglotz

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

alanglotz

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

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; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

alanglotz

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

Albert

You're welcome

Learn more: Video Tutorials | How To | FAQ Vote on what comes next