Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #35484
    Joe Fonicello
    Guest

    Hey,

    I have been using BoldGrid in conjunction with WordPress for some time now, overall it has been great. What can be tough, however, is formatting the header on my site.

    Currently, the titles of the first blog post on the page is hidden under my header widget, which makes direct-linking to posts not very pretty as the title is often cropped in half. Visible here: imgur.com/hFktPDb and on mobile here: imgur.com/1yD4fL2

    Here’s the code I am using to enable the header how it is now.

    .boldgrid-css{ background: white; }
    #theme-page .theme-page-wrapper {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    @media (min-width:1130px){
    .site-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 15%;
    z-index: 200;
    background: #2d2d2d;
    	}
    }
    
    @media (max-width:1129px){
    .site-header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 35%;
    z-index: 200;
    background: #2d2d2d;
      }
    }
    .mobileHide
    { display: none;}
    .video-responsive{
        overflow:hidden;
        padding-bottom:56.25%;
        position:relative;
        height:0;
    }
     .footer-bottom .footer_widget a{text-decoration:none !important}
    .video-responsive{
        overflow:hidden;
        padding-bottom:56.25%;
        position:relative;
        height:0;
    }
    h1.entry-title {font-style: italic}
    .entry-header .entry-title, .entry-header .entry-title a {
    background-color: #2d2d2d;
    }
    aside.sidebar { overflow-y: hidden; }

    Now, if I remove the background behind my header, you can see where the post title sits, way too far up. Visible here: imgur.com/RQhtUWV

    Is there a way to space this out so the post title doesn’t appear until further down the page? I was able to space out my sidebar like so:

    ‘<div>
    &nbsp
    </div>
    <div>
    &nbsp
    </div><div>
    &nbsp
    </div>’

    It may not be pretty, but it works.

    I would like the posts to start further down on every page, enough so they are not hidden behind the header, except for on the home page where I have a pinned post, which I do not want the post title (or date) to be visible.

    What code would I have to put in my custom-css to be able to tinker with the distance between the header and the first post on the page? Is there a way to modify it differently on the homepage than on all other pages?

    Thank you in advance for any help you can provide.
    Joe

    #35502
    Jesse Owens
    Keymaster

    Hi Joe-

    Thanks for reaching out, and thanks for using the GridOne theme for WordPress.

    Also thanks for providing your existing Custom CSS, because you already have two “breakpoints” here we can use to make this happen for different screen sizes.

    In your large-screen section, add the following rule for the margin-top on div.site-content:

    @media (min-width:1130px){ 
    div.site-content { margin-top: 120px; }
    .site-header { 
    (...)
    } 
    }

    Then, in your smaller-screen section, add this rule:

    @media (max-width:1129px){ 
    div.site-content { margin-top: 140px; }
    .site-header { 
    (...)
    } 
    }

     

    #35989
    Joe
    Guest

    Thanks! This worked great.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Post titles Hidden Under Header Widget’ is closed to new replies.