Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 9, 2018 at 7:24 am #982944
    ellamac

    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… https://indd.adobe.com/view/41fcca79-4dd5-413d-a371-cfe72ae1ffd0

    And this is the code I found but as you can see here http://bzdevelopments.co.nz – 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 https://www.bestridingtours.com/turismo-equestre/ but haven’t been able to find the code to do this.

    Any advice would be greatly appreciated.

    July 9, 2018 at 7:42 am #982945
    Yigit

    Hi,

    Please make sure you are using the latest version of Enfold which is currently 4.4.1 – https://kriesi.at/documentation/enfold/how-to-install-enfold
    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 :)

    Regards,
    Yigit

    July 12, 2018 at 9:05 pm #984893
    ellamac

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

    July 13, 2018 at 9:58 am #985069
    Victoria

    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,
    Victoria

    July 15, 2018 at 11:29 pm #985775
    ellamac

    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 https://www.bestridingtours.com/turismo-equestre/ but haven’t been able to find the code or a way to do this.
    Any ideas?

    July 17, 2018 at 4:14 am #986214
    Rikard

    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,
    Rikard

    July 17, 2018 at 6:28 am #986256
    ellamac

    Yes, that correct Rikard.
    See on this website (https://www.bestridingtours.com/turismo-equestre/) 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!

    July 17, 2018 at 8:00 am #986286
    Yigit

    Hi,

    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,
    Yigit

    July 18, 2018 at 8:40 pm #987167
    ellamac

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

    July 18, 2018 at 8:44 pm #987169
    Yigit

    Hey,

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

    Cheers!
    Yigit

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