Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 21, 2016 at 12:18 pm #601175
    Fiorilla

    Hello!

    I would like to set up my site using a header image on top (no logo) and the menu below. Ideally, it should look like this : http://mecenat.theatrechampselysees.fr/wp-content/uploads/2016/03/00-TCE2017_DESKTOP_HEADER.jpg

    I imagine that I cannot make exactly this type of menu directly integrated into the header (with color/images), but in any case I would like to have it below the header.

    How should I do it?

    Thanks in advance for your help,

    Fiorilla

    March 21, 2016 at 4:09 pm #601301
    Jordan

    Hey Fiorilla!

    Thanks for reaching out to us!

    I would suggest trying this way. Add your banner as the logo image by going to Enfold Theme Options. Then in the header settings, go to adjust the dimensions of the header under the setting Header Size and use a custom size. Also under Menu and Logo Position, choose Logo center, Menu below.

    Even after doing this, somethings may need to be adjusted using a little CSS if it is not exactly how you want it. So I will need the link to your site after you make the above changes to assist you further if needed.

    Regards,
    Jordan

    March 21, 2016 at 4:58 pm #601355
    Fiorilla

    hi Jordan,

    Thanks for your quick reply. I did what you suggested, but the banner still appears as small as a logo would be.

    Please advise as to the CSS code to add to fix this!

    many thanks

    Fiorilla

    March 21, 2016 at 10:09 pm #601532
    Jordan

    Hey!

    Thanks for getting back to me!

    Seems like your site is in maintenance mode so I am unable to see the banner. Could you also provide login details to your site.

    Cheers!
    Jordan

    March 22, 2016 at 11:49 am #601819
    Fiorilla

    Yes, sure, sorry! Didn’t think about that. Here they are!

    If I may, I have another question : I have added some icons via Fontello, but all the icons I have added since yesterday do not show up correctly (it shows blank icons). I have followed exactly the same process as before..

    Thanks again for your help!

    Daria

    March 22, 2016 at 5:22 pm #602003
    Yigit

    Hey!

    You inserted your logo in smaller size, i edited it and inserted in fullsize and then added following code to bottom of Quick CSS field in Enfold theme options under General Styling tab

    

.html_header_top.html_logo_center .logo {
    left: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}
.container.av-logo-container {
    max-width: 100%!important;
    width: 100%!important;
    padding: 0!important;
}

    Width is not enough to fill the whole container. It would be better if you uploaded your banner image in at least 1920px in width.

    I created a private testing page (link in private content field) and your icons show up fine on my end. Please flush browser cache and refresh your page a few times

    Cheers!
    Yigit

    March 22, 2016 at 6:02 pm #602045
    Fiorilla

    Hi Yigit, thanks! I did not notice that when you insert the logo, it automatically resizes the picture instead of leaving the original size.

    I was wondering whether I could make the menu appear on a red background ( #dd0031) – in which case, I could get rid of the red bar in the header and make the whole thing appear united (with the illusion of the menu integrated in the header). Is it possible to achieve? (the example I am looking to reproduct in a simpler way is http://mecenat.theatrechampselysees.fr/wp-content/uploads/2016/03/00-TCE2017_DESKTOP_HEADER.jpg )

    March 22, 2016 at 6:32 pm #602061
    Jordan

    Hi!

    To change the background of the menu to red, please go to the Quick CSS field under the General Styling tab in the theme options and place the following code there:

    #header_main_alternate {
    background-color: #dd0031;
}

    Regards,
    Jordan

    March 22, 2016 at 6:42 pm #602067
    Fiorilla

    Hi Jordan, thanks – I have inserted the code but the menu background is still white! Would you mind checking if there is something else I need to add? Thanks so much!

    March 25, 2016 at 10:11 pm #603733
    Andy

    Hey!

    then try to add an !important:

    #header_main_alternate {
    background-color: #dd0031 !important;
}

    Clear browser cache and hard refresh a few times. Check on another computer as well.

    Cheers!
    Andy

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.