Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 13, 2014 at 10:44 pm #237245
    Enabl

    Hello there,

    I’m having issues keeping our logo centered in the header at smaller screen sizes. It seems to be working all the way down to 768px. After that, the logo jumps to the left. Is there a way to keep it centered at all times?

    Also, where in the templates would I find a way to remove the Main Menu (in the header) from all the pages? Right now, I used some CSS hacks to hide the menu, but I’d rather not load an empty menu system if I can scratch it altogether.

    Here is the link to our site: enablthreads.com

    Thanks!

    Enabl

    March 14, 2014 at 7:52 am #237427
    Ismael

    Hi Enabl!

    Please add this on your custom.css or Quick CSS:

    @media only screen and (max-width: 767px) {
.responsive .mobile_slide_out .logo {
display: block;
margin: 0 auto;
float: none !important;
position: relative;
}
}

    I suggest that you keep the css to hide the menu, it is much more convenient. Add visibility: hidden;.

    Best regards,
    Ismael

    March 14, 2014 at 8:01 pm #237798
    Enabl

    Ismael,

    Thanks for the quick response! That almost worked ;)

    I added the above code to my child theme and it did center align the logo in all breakpoints except from: 980px to 480px (it stays aligned to left).

    I tried to work some magic, but I couldn’t get the logo to stay centered in that specific breakpoint. Could it have anything to do with my logo being a bit larger than the recommended size for the theme? Also, is there anyway to keep the logo vertically-aligned to the middle of the header at all times?

    Thanks for your help,

    Enabl

    • This reply was modified 10 years, 8 months ago by Enabl.
    March 17, 2014 at 10:38 am #238602
    Dude

    Hi!

    You can try this css code to vertical align the logo:

    
#top #header .logo{ position: relative; display: table; }
#top #header .logo a, #top #header .logo img{ display: table-cell; vertical-align: middle; }

    I use it on my website and it works great for me.

    Best regards,
    Peter

    July 5, 2014 at 11:33 am #287496
    chembro303

    Dude’s code, added to Quick CSS, worked exactly as needed on my site.

    I am once again blown away by how good the support of this theme is. Thank you so much.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Header Logo & Main Menu’ is closed to new replies.