Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2019
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Making menu “sticky” (but not the header image), and making menu opaque

    Hello,

    I would like to ask for help with a CSS addition to keep the menu items fixed on the top of the site, in a functional way. The site is: PROSPR | Promoting Open Science Practices

    I’ve tried with the code from this site, namely:

    .site-header {
    position: fixed;
    width: 100%;
    z-index: 1000;
    }

    .main-content {
    padding-top: 50px; /* adjust this to match the height of your header */
    }

    That almost worked. The problems were that:

    (1) the header image was made ‘sticky’ too (covering up nearly the whole site),

    (2) the menu was left transparent rather than opaque (thus the text in pages can be seen behind).

    I would greatly appreciate any advice for these issues. Thanks a lot,

    Pablo

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,910
    Thanks
    36
    Thanked 1,057 Times in 1,053 Posts
    Apply the fixed position to #site-navigation.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. Users who have thanked sunfighter for this post:

    pablobernabeu (Jan 13th, 2019)

  4. #3
    New to the CF scene
    Join Date
    Jan 2019
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you very much. That worked to set only the menu fixed, and not the page. Now I would just need to make the menu, and the whole upper area of the site, opaque, so that any page content behind can't be seen, or clicked, when one scrolls down. Could you please send me any help for that?

  5. #4
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,910
    Thanks
    36
    Thanked 1,057 Times in 1,053 Posts
    Went to your site, but the menu is not sticky??? To make the menu opaque add the opacity selector to the #site-navigation css. see it here https://developer.mozilla.org/en-US/...eb/CSS/opacity
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  6. Users who have thanked sunfighter for this post:

    pablobernabeu (Jan 13th, 2019)

  7. #5
    New to the CF scene
    Join Date
    Jan 2019
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks. I just got a response here that completed the issue.

    Best regards


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •