I was wondering if it's possible to add a background colour to just the area of the header that the navigation menu is in. Currently my whole menu bar is black, but I want the section that the menu items are in the be black, and the section with the logo to be blue.
Yes, this is possible using custom CSS but only limited to achieve the following result.
I don't think that further customization is possible without modifying the backend code. If you agree, please add the following code to the custom CSS field.
.col.span_3 {
background: blue;
padding: 20px !important;
}
div#header-outer {
padding-top: 0 !important;
}
.col.span_9.col_last ul {
padding-top: 10px;
}
That layout is not really possible with the current structure of the menu as the menu area i.e. the part containing the actual menu items does not spread full width like shown in your screenshot.
You could need to customize the header area for that. Hope you understand.
ok, is there a way for me to colour the background of the menu area by itself? Or is there a way to make it so the background colour for both pieces only reaches as far as the container width?
You can add the following code, however, due to the some limitation in the back end, the code can only change the color around the menu, so it can't go full width.
That works great Thanks, one last question. Is there a way for me to center the items vertically inside of that box? so that there is an even amount of space on top and bottom?
I see that you have changed the header back to one row.
If you want to adjust the vertical center of the menu items with the logo, please add this code:
ul.sf-menu li.menu-item a {
padding-top: 18px !important;
padding-bottom: 18px !important;
}
As for your second query, I assume that you want to change the mobile navigation menu background from black to another color? To do that, please add the following code:
@media only screen and (max-width: 768px){
header#top {
background-color: blue !important;
}
}
Hi!
I was wondering if it's possible to add a background colour to just the area of the header that the navigation menu is in. Currently my whole menu bar is black, but I want the section that the menu items are in the be black, and the section with the logo to be blue.
Is this possible?
GeHi Zach,
Thank you for reaching out to us.
Yes, this is possible using custom CSS but only limited to achieve the following result.
I don't think that further customization is possible without modifying the backend code. If you agree, please add the following code to the custom CSS field.
.col.span_3 { background: blue; padding: 20px !important; } div#header-outer { padding-top: 0 !important; } .col.span_9.col_last ul { padding-top: 10px; }Hope this helps.
Best regards.
Awesome! That worked great!
Is there anyway for me to make the blue stretch to be full width?
I'm using the logo on top of the nav option.
I've attached a screenshot.
Hi Zach,
Could we have a link to this page in the screenshot and we will try to see if this can be done with some CSS?
Thanks.
it's just the homepage, but I'd like it to function like that on all of my pages if it can.
Hi Zach,
Apologies for the late reply.
You can use this CSS:
header#top{ background-color:blue }But you will need to change the color of an active menu item from the header navigation hover color option.
Hope this helps.
I'd like it to look like my attached image, is this possible? Or am I going to have to find another solution
Hi Zach,
That layout is not really possible with the current structure of the menu as the menu area i.e. the part containing the actual menu items does not spread full width like shown in your screenshot.
You could need to customize the header area for that.
Hope you understand.
ok, is there a way for me to colour the background of the menu area by itself? Or is there a way to make it so the background colour for both pieces only reaches as far as the container width?
you Hi again Zach,
Thank you for reaching out to us.
You can add the following code, however, due to the some limitation in the back end, the code can only change the color around the menu, so it can't go full width.
header#top .col.span_9.col_last { background-color: black; }After adding the code, your header will look like this:
Hope this helps.
Best regards.
That works great Thanks, one last question. Is there a way for me to center the items vertically inside of that box? so that there is an even amount of space on top and bottom?
I'd also like to disable to black menu bar backer on mobile devices. As it looks kind of funny, is this a possibility?
Hi again Zach,
Thank you for writing back to us.
I see that you have changed the header back to one row.
If you want to adjust the vertical center of the menu items with the logo, please add this code:
ul.sf-menu li.menu-item a { padding-top: 18px !important; padding-bottom: 18px !important; }As for your second query, I assume that you want to change the mobile navigation menu background from black to another color? To do that, please add the following code:
@media only screen and (max-width: 768px){ header#top { background-color: blue !important; } }Hope this helps.
Best regards.