Header media as background

  • Resolved komorebikun

    (@komorebikun)


    7 years, 8 months ago

    Hi all!

    I have a question regarding the header media in the twenty seventeen theme. I noticed that on the front page, I can reduce the width of the top navigation menu and site content div to have the header media also be seen on the sides of the web page, kind off like a bezel. I was hoping I could also achieve the same with other pages and single posts, but the most I can do is reduce the width of the navigation menu, the content div doesn’t want to move at all and all that is shown on the part of the navigation menu that is removed is a slightly darker shade of white. Any idea how I would go about accomplishing the same I did on the front page on other pages as well?

    Here is the css I used in order to reduce the menu and content width:

    .navigation-top, .site-navigation-fixed.navigation-top, .site-content-contain {
    width: 80%;
    left: 10%;
    }

    Any help would be really appreciated!

Viewing 1 replies (of 1 total)
  • Thread Starter komorebikun

    (@komorebikun)

    Just found the solution!

    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    position: fixed;
    height: auto;
    left: 50%;
    max-width: 1000%;
    min-height: 100%;
    min-width: 100%;
    min-width: 100vw; /* vw prevents 1px gap on left that 100% has */
    width: auto;
    top: 50%;
    padding-bottom: 1px; /* Prevent header from extending beyond the footer */
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    }

Viewing 1 replies (of 1 total)
  • The topic ‘Header media as background’ is closed to new replies.