Logo alignment – header

[shayne hughes]

Header alignment
Currently my site logo seems to be positioned to the baseline of the header…on my portfolio page however the site logo sits below the container until you begin scrolling then it seems to move up slightly to sit on the base of the container – See attached image for current header alignment.

I’m just wondering if there is a way to center align all header content to the container across all pages (menu icon, social icon and logo – note: I have removed the social icon from mobile view)?

Services alignment – Homepage
Also on my home page my services seem to be staggered – is there a way to align these? – see attached image for current services alignment

Site link is: http://www.shaynecreative.co.nz

Attachments:

You must be logged in to access attached files.

[Veena]

Pls try the below custom CSS in themeoptions –

.page-id-5246 #site-logo {
   top: 0;
}
#site-logo a {
    display: inline-block;
}
#site-logo {
    display: block;
    text-align: center;
    margin: 0 auto;
    float: none;
}
.side-nav-toggle {
    top: -40px;
    text-align: center;
    position: relative;
    margin: 0 auto !important;
}
#sidebar-header .social-list {
    top: 0;
    text-align: center;
    margin: 30px auto 0;
    text-align: center;
    position: relative;
}
#header.sticky #site-logo {
    display: block !important;
    margin: 0 auto;
    text-align: center;
    float: none;
}
#header.sticky #sidebar-header .social-list {
    top: 0px;
}
#header.sticky .side-nav-toggle {
    top: -40px;
}
ul.social-list a {
    margin-right: 0;
}

[shayne hughes]

Hi Veena,

Thanks for your reply but this just centered everything to the middle of the page and made the header container really big…

I don’t want the container size to change at all, i just want everything within that container to be vertically centered (not all aligned to the middle of the page)

Hopefully that clarifies that 🙂

Thanks again,
Shayne

[Veena]

Pls use the below custom CSS –

#site-logo {
    top: 0;
}
#header.sticky #site-logo {
    top: 0;
}
.side-nav-toggle {
    top: 35px;
}
#header.sticky #sidebar-header .social-list {
    top: 45px;
}
#header.sticky #sidebar-header .social-list {
    top: 35px;
}
#header.sticky .side-nav-toggle {
    top: 25px;
}

[shayne hughes]

Perfect thankyou!

[Author]

Posts