Foodie Theme- Header Right Widget

[lizbarber05]

I added a header right widget to the foodie theme. I placed the simple social media plugin into the header and now the simple social media icons are hiding behind the slider.
What CSS can I used to get the social media come out in front and above the slider?
Thanks in advance!

http://testsite.sweetsimplicitydesigns.com

[Sridhar Katakam]

Looks fine here. Can you show us a screenshot of the issue?

---

Genesis Tutorials | Follow me on Twitter

[lizbarber05]

Sorry Sridhar, I realize I forgot to mention that it's the responsive view where I am having the problem.

Here's is a snapshot of what I'm seeing on responsive devices.

[Sridhar Katakam]

1) Add the missing closing brace

above

.simple-social-icons {
		float: none;
		 width: 100%;
	}

after line 2350 in your style.css

FYI.

2) Add the following at the end:

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

	.title-area {
		width: auto;
	}

}

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

	.widget_nav_menu {
		float: right;
	}

}

@media only screen and (max-width: 959px) {
  
	.header-image .site-header {
		background: none;
		height: auto;
	}

	.title-area {
		width: 100%;
		background: url("http://testsite.sweetsimplicitydesigns.com/wp-content/uploads/2014/08/320px-logo.png") no-repeat center center;
	}

	.site-header .widget-area {
		text-align: center;
	}

	.widget_nav_menu {
		float: none;
	}

	.simple-social-icons ul {
		float: none;
		margin: 0 auto !important;
		display: table;
	}

}

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

	.title-area {
		background-size: contain;
	}

}

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

	.header-widget-area .simple-social-icons ul li {
		margin: 0 5px 12px !important;
	}

}

---

Genesis Tutorials | Follow me on Twitter

[lizbarber05]

Sridhar, I just want to say thank you so much for your amazing help with this.
Your help saved me today!

Thanks again!

[Author]

Posts