Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #982944

    Hello! I’m wondering if it might be possible to change the background colour of a footer widget column.
    I’ve managed to change the size of the columns and almost changed the colour but its just not right!!
    This is ideally how I want it to look…

    And this is the code I found but as you can see here – it isn’t quite working for me.

    #footer .flex_column:nth-child(1) {
    width: 38%;
    margin-left: 0;
    background-color: #1e5074;
    #footer .flex_column:nth-child(2) {
    width: 20%;
    margin-left: 3%;
    background-color: #61a60e;
    #footer .flex_column:nth-child(3) {
    width: 36%;
    margin-left: 3%;

    I’m also wondering how I might go about creating the solid hover / active menu blocks with the small line underneath. I originally saw these here but haven’t been able to find the code to do this.

    Any advice would be greatly appreciated.



    Please make sure you are using the latest version of Enfold which is currently 4.4.1 –
    You can create a page and use it as a footer. In your case, you could use Grid Row element and display each cell on its own on mobile :)



    Thanks. I’m not sure how that would work though. Can I apply a page with grid row element to a footer widget?


    Hi ellamac,

    In the latest version of Enfold, you can set another page to be the footer.
    Image 2018-07-13 at 10.58.41.png

    Best regards,


    Brilliant!! Thank you.

    I also was wondering about creating a solid hover and active menu block with a small line underneath. I originally saw this design here but haven’t been able to find the code or a way to do this.
    Any ideas?


    Hi ellamac,

    I’m not sure if I understand your question, are you looking to have a background behind the active menu item in your main menu?

    Best regards,


    Yes, that correct Rikard.
    See on this website ( the main menu has an active grey block with a dark blue line underneath the block, and a cyan coloured hover for each menu item with solid line underneath?
    This was promoted with some of the best Enfold websites designed recently and my client really really loved the concept!



    I went to Enfold theme options > Advanced Styling and added styling to main menu links for active and hover states and then added following code to bottom of Quick CSS field in bottom of General Styling tab

    .main_menu ul:first-child > li.current-menu-item > a {
        box-shadow: #2d5c88 0 -5px 0 inset;
    .av-main-nav > li:hover > a {
        -webkit-box-shadow: inset 0 -5px 0 #063056;
        -moz-box-shadow: inset 0 -5px 0 #063056;
        box-shadow: inset 0 -5px 0 #063056;

    Please review your website :)

    Best regards,


    Thats exactly what I wanted.Thank you for your help – much appreciated!



    You are welcome! Let us know if you have any other questions or issues.


Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Changing the background colour of footer columns?’ is closed to new replies.