CSS manipulation on 2012 theme

  • Unknown's avatar
    tamimzeineddine · Member ·

    Hi everyone,

    I’m new here and have never used CSS before. I just wanted to know if it was possible if the menu containing the links to other categories could be moved underneath the header image using only CSS on the 2012 theme. Thanks for your time.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, responsive width themes, such as Twenty Twelve can be tricky to move elements around and have things work out cleanly. Add the following to your custom CSS. Go to Appearance > Customize > CSS, delete all the informational text from the window and paste in the following. Make sure and narrow down your browser address bar clear down to smart phone widths to see how things work with this code.

    .site-header {
    position: relative;
    padding-bottom: 4.5rem !important;
}

.main-navigation {
    position: absolute;
    bottom: 0;
    width: 100%;
}

@media screen and (max-width:900px) {
.site-header {
padding-bottom: 7.5rem !important;
}
}

@media screen and (max-width: 600px) {
.site-header {
padding-bottom: 2.8rem !important;
}
}
  • Unknown's avatar
    tamimzeineddine · Member ·

    Thank you so much kind sir!

    I really appreciate that you took the time to help me with this! Keep up the phenomenal work!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome and thanks.

  • The topic ‘CSS manipulation on 2012 theme’ is closed to new replies.