Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • June 4, 2015 at 6:00 pm #454644
    JC

    This is something I’ve been toying around with the past couple of days, but I can’t seem to figure it out.

    Basically, I’d like to put a menu in my footer – but stylize it with CSS to have a rollover effect and for it to be columns wide.

    Ideally, it would look like the 3rd footer (right) column on nerdfitness.com

    View post on imgur.com

    To keep it simple for whomever helps, let’s just do it like he has it and I’ll play with it from there.

    Thanks!

    June 4, 2015 at 9:52 pm #454754
    Elliott

    Hi newinceptions!

    Set your footer column layout to 3 or 4 columns in Dashboard > Enfold > Footer and then drag the “Custom Menu” widget to whichever column you want in Dashboard > Appearance > Widgets.

    Let us know when your done with that and we’ll give you some CSS to style it.

    Regards,
    Elliott

    June 5, 2015 at 5:58 pm #455207
    JC

    Hey Elliott,

    Thanks for the recommendation. I had previously done this using 4 columns, but wasn’t sure if this would get me the results I want on mobile. Ideally I’d like for the two menus (of 5 items each) to be side by side on mobile.

    Ideal Mobile Footer to resemble this:

    Nerd Fitness Footer

    (Would be simple enough to get rid of Footer Column 1 in mobile like they have… or at least shrink the image??)

    However, simply using 4 footer columns and two menus in the last 2 footer columns has gotten me one menu on top of the other in mobile. It just looks weird.

    That’s why I was thinking that they had used one footer column and one menu… but I wasn’t sure about the CSS they used to get the one menu to show up in as two menu columns in one footer column.

    NerdFitness Footer Layout Referencing

    Cheers!

    -JC

    June 5, 2015 at 6:12 pm #455218
    JC
    This reply has been marked as private.
    June 7, 2015 at 6:41 am #455580
    Ismael

    Hi!

    If you want the 3rd and 4th columns to float side by side on smaller screens, you can use this in the Quick CSS field:

    @media only screen and (max-width: 767px) {
#footer .flex_column:nth-child(3), #footer .flex_column:nth-child(4) {
  width: 48% !important;
  float: left;
}}

    You can also use the nth child selector to adjust the width of the second column on desktop view. Use css media queries.

    Cheers!
    Ismael

    June 8, 2015 at 6:07 pm #456272
    JC

    Thanks Ismael. That helped with the columns!

    Anyway to move the background down behind them?

    Thanks!

    June 9, 2015 at 6:01 am #456438
    Ismael

    Hi!

    You can try this:

    .footer_color {
  background: #222222 url(//newinceptions.com/wp-content/uploads/2015/05/Footer-Background2.png) center bottom no-repeat scroll;
  background-size: cover;
}

    Add the code inside the media query.

    Regards,
    Ismael

    June 9, 2015 at 6:10 pm #456838
    JC

    Whoa. “inside the media query”. Hopefully there’s a reference link in how to do this…

    If not, I assume by adding the code inside the media query you mean to place the code in the grid.css file, correct?
    Right after:

    /*  #Mobile (Portrait)
================================================== */

@media only screen and (max-width: 767px) {

    I did try placing it after this point but it didn’t do anything noticeable.

    I’m using a child theme so, I don’t know how that changes things. Would I start another media query in the custom style.css or leave it in the parent?

    June 10, 2015 at 9:20 am #457062
    Ismael

    Hi!

    I’m sorry about that. We already have this code, right?

    @media only screen and (max-width: 767px) {
#footer .flex_column:nth-child(3), #footer .flex_column:nth-child(4) {
  width: 48% !important;
  float: left;
}}

    This line is the media query:

    @media only screen and (max-width: 767px) {

}

    Inside that media query, we can add css declarations that is going to be applied on a limited scope ( on our example, screen with maximum width of 767px ). The final snippet should look like this:

    @media only screen and (max-width: 767px) {
#footer .flex_column:nth-child(3), #footer .flex_column:nth-child(4) {
  width: 48% !important;
  float: left;
}

.footer_color {
  background: #222222 url(//newinceptions.com/wp-content/uploads/2015/05/Footer-Background2.png) center bottom no-repeat scroll;
  background-size: cover;
}
}

    Add it the child theme’s style.css file or the Enfold > General Styling > Quick CSS field.

    Cheers!
    Ismael

    June 10, 2015 at 6:14 pm #457446
    JC

    Ah, I see. Yeah, I had done that in Quick CSS before. So yeah, probably adding that to the style.css is redundant… but it works with the new code you provided!

    I also changed the background-size from cover to auto. Nice to have a little bit of that globe in there. :) (Since it is at auto… is it even needed now?)

    With your guys’ help and going back to http://www.w3schools.com/ and using their “Try It” section… I’m learning – slowly!

    Thanks Ismael!!

    June 10, 2015 at 10:55 pm #457552
    Basilis

    Hey!

    GLad we helped you out. I will now close the ticket, let us know with a new one if you have more questions

    Cheers!
    Basilis

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Menu Footer’ is closed to new replies.