Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #23472

    Hello again!

    I’m looking to change my menus’ background color : how can it be done?

    I want to change the “header” menu and the sidebar (on the right) menus’ colors, along with the footer. And the font’s color and/or size.

    The basic idea is that the only part of the site that should appear on a white background is the article/page in itself.

    Here is my website :


    Hi Drucci,

    The main menu is styled with this which you can add to your custom.css file or Quick CSS and change:

    .main_menu {
    background: #f8f8f8;
    border: 1px solid #e1e1e1;

    The sidebar only has a single background color for all widgets which is:

    .sidebar .widget {
    background: #fff;
    color: #eee; /*default color of text*/

    And the footer:

    #footer {
    background: #fff;
    border-top: 1px solid #EEEEEE;

    Colors within the widgets however is a bit more complicated. Most can be done with:

    .sidebar .widget a{
    color: #fff;

    However there are quite a few that have specific color styling which needs to be targeted individually.





    I want to change the backcolour in the top (: where is the logo and the menu). Please can you help me?

    my site:

    Ik wil graag de achtergrondkleur aan bovenkant site (waar logo en menu geplaatst is) wijzigen. Wie kan mij helpen?

    Best regards,



    Thanks, everything you proposed worked!

    However, I still have some changes to make :

    – how do I change the Megamenu’s background color once you’ve displayed it? The header menu now is in the right color but when the menus are hovered they still appear in white.

    Also, is there a way to suppress the tiny white “borders” between each menu?

    – how do I change the font of the header menus and the sidebar menus to white?

    – how do I change the search bar’s background (in the header menu) to another color?

    – is it possible to change the category’s font to white and its background to my choice of color, in every menu?


    @ Rik – can you post your question as a new topic in the Avisio forums here:


    If you want to change everything individually like that, you’ll need to dig in a bit more than what the theme options offer. This is a good introductory video on how to do that using the same kinds of css additions that I’ve added above:

    We just aren’t able to go through and do full customization for every element on the site via support.


    Thanks for the video, it is really helpful and I can indeed make the changes by myself.

    However I have one last question (I have tried to resolve it by myself but it’s been two hours and I can’t get it done) : how do I put my header’s logo/banner to “fit”/touch the main menu instead of being a little over it with a blank space?



    Just add this on your custom.css or Quick CSS {
    top: 40px;

    Adjust the top position.




    It doesn’t work, even when I adjust the top position…

    One final query (I know I said the same for the previous one but it really is another thing that I’ve tried for hours and can’t make work) : how can I change the size of my main menu’s submenus? I’ve changed the initial disposition so that I display only 3 categories by row (in the “Oeuvres” submenu) but I would like to make the last category “touch”/fit the left side of the sidebar menu, so that it doesn’t overrule it when the menu is extended.



    Please give us a link to your website so that we can inspect it.




    You can use following css code – insert it into the quick css field:

    #top .main_menu .avia_mega div ul li{ width: 170px; padding:15px; }
    .main_menu .avia_mega3{width: 618px; }

    The first value determines the width of each column – eg change it to 150px (170 – 150px = 20px less width per item; 3*20px = 60px less width for all 3 items).

    The second line determines the width of the entire dropdown – i.e. set it to 558px (618px – 60px = 558).


    Thanks, it works! But there still is a problem, in that a white border gets out of the menu’s corner… I thought it was my picture’s size at fault but even when I reduce it the big corner blank remains.



    Please add this on your custom.css

    #top .main_menu .avia_mega div ul {
    float: left;
    width: 100%;




    Thanks, it works perfectly now!

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Change menus' background color?’ is closed to new replies.