Theme – Atrium: Header CSS

  • Resolved LondonThroughTheLens

    (@londonthroughthelens)


    11 years, 1 month ago

    Hello,

    I’d be really grateful if someone could help with altering the size of the header image on my site: http://www.londonthroughthelens.com.

    The uploaded image is quite small, but there appears to be some CSS somewhere which is driving the header size area to be a huge chunk at the top of the site. I want to roughly half its height. (The grey image)

    I’ve hunted around the CSS editor and tweaked various bits that I thought could be it to no joy. I’ve reset everything back to default now.

    Any help much appreciated!

    Thanks
    Ben

Viewing 7 replies - 1 through 7 (of 7 total)
  • Sam

    (@soumendra)

    11 years, 1 month ago

    Hello,

    You can try this to your Custom CSS:

    .home-featured-content {
    padding-bottom: 115px;
}

    Thank you.

    Thread Starter LondonThroughTheLens

    (@londonthroughthelens)

    11 years, 1 month ago

    You sir, are a legend.
    Thank you

    Sam

    (@soumendra)

    11 years, 1 month ago

    Welcome. 🙂

    Thread Starter LondonThroughTheLens

    (@londonthroughthelens)

    11 years, 1 month ago

    Sam,
    Any ideas how I might make the logo a touch bigger?
    Then I’m done I think!

    Sam

    (@soumendra)

    11 years, 1 month ago

    You can try this in your Custom CSS for achieving that:

    #masthead .logo > img {
    min-height: 80px;
    min-width: 145px;
}

    Thank you.

    Thread Starter LondonThroughTheLens

    (@londonthroughthelens)

    11 years, 1 month ago

    Thanks again Sam!

    Last questions!
    If I wanted to move the logo out from where it is and make it a central part of the grey background, underneath (or above might be better) the menu – any ideas how I would achieve that?

    Lastly, what am I missing here! The code is always simple, but for the life of me I cannot find the variables / tags to know what to call up to edit !

    Sam

    (@soumendra)

    11 years, 1 month ago

    You can try this in your Custom CSS for achieving that:

    .compact.with-logo {
height: 160px;
}
.site-branding, #site-navigation {
max-width: 1020px !important;
width: 100%;
}
.logo {
float: none !important;
margin: auto !important;
}
.menu-menu-1-container {
max-width: 90% !important;
padding-left: 25% !important;
}

    You can use browser development tool like firebug in Firefox or Chrome inspector for Chrome.

    Thank you.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Theme – Atrium: Header CSS’ is closed to new replies.