Main Menu Bar

Good day,

Yellow arrow: Is it possible to make this grey box white?

Red arrows: Without it being too complicated is it possible to move this menu bar directly above the featured images so it is between the red arrows and spaced evenly and centered?



Appreciate the support. Take care.

 

*Should say blue arrow in the above post.

 

Hello,

1. For the grey background issue,
paste the following code in your Custom CSS
(Appearance -> Theme Options -> Styling Options -> Custom CSS)

Code:

.header {
background: none;
}
.menu_bar {
background: none;
}

This will remove the grey background.

2. For the menu position issue,
paste the following code in your Custom CSS
(Appearance -> Theme Options -> Styling Options -> Custom CSS)

Code:

.menu_container {
margin-top: 139px;
}
.flexslider {
margin-top: 0px;
}
#menu {
float: left;
}

This will solve your menu issue.

 

Hello,

Thanks for the response. Most of the issues have been resolved. I added the code for the footer color but it did not seem to work. I feel that the reason may be that there is a conflicting code somewhere in the custom CSS styling.

Would you please look over the list of changes we have made since the begining and identify where the conflict may be.

All the CSS codes currently in use:


.header {
background: none;
}
.menu_bar {
background: none;
}









.menu_container {
margin-top: 139px;
}
.flexslider {
margin-top: 0px;
}
#menu {
float: center;
}










/* removes thin white line from above footer. */
.footer_top_linestrip {
display: none;
}









/* Footer menu alignment. */
.footer_wrapper_top .footer h4 {
text-align: center;
}
.footer_wrapper_top .footer ul {
text-align: center;
}








/* Footer Margin */
.footer_widget.first {
padding-left: 20px!important;
}












/* Removes the grey area from the slider image. */
.slider_container {
background: none;
}










/* Remove link panel */
.linkpanel{
display:none;
}






/* New menu code. 8/26/2013 */

.menu_bar {
width: 122%;
}
#menu .ddsmoothmenu li a {
font-family:Trajan Pro;
font-size: 15px;
}
#menu .ddsmoothmenu {
float: none;
text-align: center;
}












/* INACTIVE: Has color for the header. Pic edges not color matched.
p{
font-family:Arial;
}
.wrapper{
background:# white !important;
}
.header{
background:# white !important;
}
.menu_bar{
background:# white !important;
}

*/




/* Footer color. */
.heading_container {background: white !important;}
.footer_wrapper_top {background: white !important;}
.footer_wrapper_bottom {background: white !important;}










/* http://www.inkthemes.com/community/threads/centering-the-footer.2256/ */
.copyrightinfo {
padding-center: 0px;
}









/* http://www.inkthemes.com/community/threads/how-do-i-fix-the-margins.217/ */
.content_info {
margin-left: 30px;
}
.content-info-btn {
margin-right: 30px;
}
.feature_inner_box.first {
margin-left: 20px;
}
.feature_inner_box.last {
margin-left: 13px!important;
}










/* http://www.inkthemes.com/community/threads/remove-pattern-behind-header.995/ */

.heading_container {
background: #045f8a!important;
}

.slider_container {
background-image: none!important;
}













/* How does one go about making the header and footer area the same size as the middle section? And will the background image automatically stretch to fill the newly exposed area? 227, 224, 224 */

.wrapper{
background:none;
}
.footer_wrapper_top{
background:none;
}
.footer{
background:
rgb(227, 224, 224);
}












/* Slider Control */
.flexslider {
margin: 25px 0px 0px 0px;
width: 100%;
}
.flexslider .slides img {
width: 100%;
}
.slider_wrapper {
background-position: 0px 0px;
background-size: 950px 20px;
}









/* Removes frame from slider. */
.flexslider .slides {
border: none;
}
.flexslider {
border: none;
background:none;
}














/* Unedited CSS

.wrapper {
margin: -15px 0px;
}
.header {
margin: -5px;
}
.header .logo img {
margin-bottom: -12px;
}
.logo {
margin-top: 10px;
margin-bottom: 10px;
}
.menu_container {
margin-top: 66px;
margin-bottom: 54px;
}
*/

/* Edited */

.wrapper {
margin: 0px 0px;
}
.header {
margin: 0px;
}
.header .logo img {
margin-bottom: 0px;
}
.logo {
margin-top: 10px;
margin-bottom: 10px;
}
.menu_container {
margin-top: 60px;
margin-bottom: 0px;
}











/* Gets rid of huge grey text box. */
.main_content_wrapper {
display: none;
}
.feature_box {
background: none;
}










/* Sharpens the slider image. Retains the smooth edges. */
.slider_info {
margin-top: 350px;
}
.flexslider .slides {
height: 300px;
}
.flexslider .slides img {
height: 300px;
}











.slider_info p {
text-align: justify;
}
















/* Adjust header margin. */
.header{
margin: 0;
}
.logo{
margin-top: 0px;
margin-bottom:0px;
}
.menu_container{
margin:90px -142px 0px;
}













body {
font-family: Trajan Pro, Trajan Pro,Trajan Pro;
font-size:13px;
line-height:20px;
color:#5c5c5c;
background-attachment:fixed;
}
h1, h2, h3, h4, h5, h6 {
font-family: Trajan Pro, Trajan Pro, Trajan Pro, Trajan Pro;
font-weight:normal;
}
h1 {
font-size:24px;
}
h2 {
font-size:22px;
}
h3 {
font-size:20px;
}
h4 {
font-size:18px;
}
h5 {
font-size:16px;
}
h6 {
font-size:14px;
}
a {
text-decoration:none;
color:#079ad8;
}
a img {
border:none;
}
:focus {
outline:none;
}
ol {
list-style: decimal;
padding-left:30px;
}
ul {
list-style: disc;
}
ol li {
border-bottom:none !important;
margin-top:1!important;
margin-bottom:1!important;
padding-bottom:0!important;
padding-top:0!important;









.footer_widget.third{
padding-left: -100px!important;
}

 

Hello,

We have checked your website and it seems that by mistake you have forgot to close the curly bracket in your custom css, So close it, This will solve your issue.