• Skip to content
  • Skip to forum navigation

StudioPress

  • Create a Site
  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Discussion
  • Design Tips
  • Showcase/Feedback
  • FAQs
  • Forum Rules
  • Forum Log In

Set the Monochrome Pro fixed header to a relative position

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Design Tips and Tricks › Set the Monochrome Pro fixed header to a relative position

This topic is: resolved

Tagged: css code, fixed header, monochrome pro theme, relative position

This topic contains 3 replies, has 2 voices, and was last updated by  ahoy.hoy 4 months, 2 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 2, 2017 at 5:28 pm #214210

    ahoy.hoy
    Participant

    I wish to set the Monochrome Pro fixed header to a relative position.

    .site-header {
    background-color: rgba(0, 0, 0, 0);
    }
    .front-page .site-inner {
    margin-top: 0;
    }

    Gives the header transparency and raises the background image. So far so good. But add in:

    .site-header {
    position: relative;
    }

    And the background image drops by 100px or so. I figured:

    .front-page .site-inner,
    site-inner {
    margin-top: 0px !important;
    }

    Would solve the problem. Sadly it does not. Any ideas would be gratefully received?

    Thank you all in advance for your time and trouble.

    Kind regards
    Jason

    http://localhost
    December 3, 2017 at 5:32 am #214218

    Victor Font
    Moderator

    Think of fixed vs. relative as 3D vs. 2D. A fixed position header floats above the other elements on the page. Changing the header from fixed to relative places it inline on the same plane as the other elements on the page. That's why the image dropped. The relative header had to make room for itself and pushed the image down. By using margin 0 on the image, you tell it to abut itself to the area immediately above, the relative header, not the page. If you want the image to be under the relative header, you have to give the image a negative margin to move it up past the edge of the header. You may also need to apply a higher z-index to the header than the image to simulate the same appearance as the fixed header.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (844-842-3668)

    December 3, 2017 at 3:21 pm #214229

    ahoy.hoy
    Participant

    Hey Victor,

    Thank you for your swift reply and such an insightful answer. I never considered the relationship of fixed vs. relative as 3D vs. 2D.

    With this now in mind, inspecting the elements on https://my.studiopress.com/themes/monochrome/#demo-full, I have combed the z-indexes.

    And I reckon the problem is style.css:695

    .site-inner {
    margin-top: 180px;
    }

    the margin-top: 180px being struck-through. And me not being able to identify the parent!

    Could I trouble you further and ask why is should be?

    December 6, 2017 at 4:25 pm #214323

    ahoy.hoy
    Participant

    The missing piece of he puzzle is:

    .front-page-1 {
    margin-top: -100px;
    }

    The Monochrome Pro header is now positioned relative and transparent.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Set the Monochrome Pro fixed header to a relative position’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a Site Shop for Themes

Footer

StudioPress

Copyright © 2018 Rainmaker Digital, LLC.
StudioPress® is a registered trademark of
Rainmaker Digital, LLC.

Products
  • Create a Site
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble