Suburbia: Make The Whole Top Area only for Header, Move Category/Menu to the Top

  • Author
    Posts
  • #2253353

    Hello,

    Need your help regarding header and menu.

    In Suburbia, the top part is usually consist of: Header, Site Title, and Site Description. They are all located side by side horizontally.

    The default Suburbia header template is too small, a squarish 155 x 155 px and I dislike that.

    I would like to have the whole top area only for the header. Maybe by removing the site title and description?

    Another thing is about menu.

    When the header problem is fixed, can I have my category/menu located under the header instead of on the sidebar like now? And then maybe having the sidebar for widget?
    I would like to have the menu/category horizontally and not vertically like now.

    Thanks in advance! :)

    The blog I need help with is theibrahimsfamily.com.

    #2253588

    Let’s try these styles:

    Remove site title and description.

    #site-title, .desc {
        display:none;
    }

    Make all the space for header. We might need to tweak this a bit once you add the header image, to make it look good.

    .space {
        width: 100%;
    }

    .wf-active #access {
    width:auto;
    min-height:100px;
    }

    #access li {
    display: inline-block;
    border-bottom: none;
    }

    These are the menu styles. Apply them and see what you think.

    .wf-active #access {
    	width:auto;
    	min-height:100px;
    }
    
    #access li {
    	display: inline-block;
    	border-bottom: none;
    }
    
    #access ul.menu {
    	border-color: transparent;
    }

    #2253589

    Ignore the CSS that is not formatted above. Use only the formatted styles.

    #2253593

    Hi chaitanyamsv, thank you so much (again!) for your help. Been 3 times with this :)

    I have uploaded the CSS you mentioned above. The top area looks good with only 1 column. Though the header image-size is still set into its default.

    And for the menu, how can I change the position to be centered?

    Oh and since the menu move to the top area, the layout looks a little bit mess because one post is going up to the sticky area…

    #2253594

    Ok, add these as well:

    .space {
        width: 100%;
        text-align: center;
        height: 100%;
    }
    
    .logo-fix {
    	display:none;
    }
    
    #access ul.menu {
    	text-align: center;
    }
    
    .grid.sticky {
    	width: 449px;
    }

    We can later consolidate these rules with the previous ones once you like the final result and have no more changes to make :-)

    #2253598

    Thank you, I’m so happy!
    Now it looks more like what I want :)

    However, the image header size is still 155×155 px. Is it possible to make it 100% the size of top area?

    And another thing, it’s a out of topic but I will be really glad if you can help me to make the width of “older post” button exactly the same width like the middle area.

    #2253599

    Could you upload a wider header and see how it appears?

    make the width of "older post" button exactly the same width like the middle area.

    input[type=submit], #infinite-handle span {
    padding: 6px 425px;
    }

    Try this style and see if you like the result.

    #2253600

    Solved with the “older post” button! :)

    I can’t upload bigger image because every time I upload, it always asked me to crop into 155×155 px.

    #2253601

    I see. Let’s trick the theme.

    Remove the current header and modify the .header rule of your custom CSS as following to add the background-image as following:

    So the complete rule is:

    .header {
        border: 2px dashed;
        color: #ab2427;
        min-height: 90px;
        background: url(https://chaittestpress.files.wordpress.com/2015/01/cropped-1-abigail-keenan.jpg) no-repeat scroll top;
    }

    Now that’s a test image. Please upload a wider header to your Media Library and replace the url in the above CSS :-)

    #2253602

    It’s looking good! :)

    Just a little bit more, if I open a single post, the main body looks like it has divided into 3 columns. With my post on the left, nothing in the middle, and widgets on the right. Could you help me to make it into 2 columns?

    And then since I applied the CSS for “older post” button, it seems that my “follow” button is also affected (in my footer widget), because now we cannot see the title. It’s now just a single rectangular button.

    #2253603

    Oh yes, and another thing.. How can I linked my image header to my home blog?

    #2253604

    Could you add this style to fix the width of the single posts and let me know how it goes:

    .single-post .post #single {
    
    	width: 730px;
    }

    To fix the older post button, please modify

    input[type=submit], #infinite-handle span {
    padding: 6px 425px;
    }

    to the following:

    #infinite-handle span {
        padding: 6px 425px
    }

    We cannot use CSS to add links so we need to rely on Home button to take your visitors to the homepage of your blog.

    #2253605

    I love it!
    Changed my mind about the dashed-border though.. and I’m totally satisfied for now :)

    Many many thanks and wishing you a great weekend :)

    #2253607

    Wow, your site and header image look super cool :-)

    Keep up the good work and blogging. Best wishes to you and your family.

The topic ‘Suburbia: Make The Whole Top Area only for Header, Move Category/Menu to the Top’ is closed to new replies.