Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 13, 2014 at 5:41 pm #223524
    bleepstudio

    Hi I would like to have the top menu (in all media types and sizes) to be transparent and always fixed over main content (not above).

    Could you please provide the CSS for this so the full screen slider is completely full screen and menu overlays it.

    Thanks in advance
    Steven

    February 13, 2014 at 7:06 pm #223574
    Yigit

    Hi Steven!

    Which type of header are you using? You can post the link to your website or check it in Enfold theme options > Header tab

    Cheers!
    Yigit

    February 13, 2014 at 7:14 pm #223580
    bleepstudio

    Hi Yigit, thanks for getting back. You can view my development here:
    http://christianmacleod.com/dev/

    and login:
    http://christianmacleod.com/dev/wp-admin/
    user: steven
    pass: bleep123

    I was able to change the desktop size but it created a visible footer the same height as the menu. I wondered if there was a better, simpler way to work across all devices.

    Thanks in advance
    Steven

    February 14, 2014 at 5:24 pm #224065
    Yigit

    Hi!

    Please review your website now. You can find custom CSS code i added in Quick CSS section in Enfold theme options under Styling tab

    Regards,
    Yigit

    February 21, 2014 at 9:30 am #227316
    bleepstudio

    Hi Yigit, thanks for the code, there is still a couple of issues:
    1. The logo is no longer visible on mobile
    2. The code I added for desktop is wrong as it has also brought the footer up into the view.

    Regards,
    Steven

    February 21, 2014 at 9:56 pm #227695
    Yigit

    Hey!

    Please remove following code from Quick CSS

    .fixed_header #main {
padding-top: 0;
}

    and add following code to Quick CSS 

    @media only screen and (max-width: 480px) {
.logo, .logo a, .logo img { max-width: 300px!important; }}

    Best regards,
    Yigit

    February 22, 2014 at 10:37 am #227852
    bleepstudio

    Thanks, Yigit – that’s added the logo into mobile.

    However if I remove “.fixed_header #main {padding-top: 0;}” the menu is no longer transparent on desktop sizes.

    The intention is to always have a fixed header (does not resize to the small logo version) transparent over a full height website.

    February 23, 2014 at 2:38 am #228009
    Ismael

    Hi!

    Please add this on Quick CSS to retain the 0 padding on desktop view:

    @media only screen and (min-width: 481px) {
.fixed_header #main {
padding-top: 0;
}
}

    For further customization, please visit Werkpress.

    Cheers!
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘top menu transparent and fixed over main content’ is closed to new replies.