Full width header, logo left and menu right aligned

  • Resolved andredistel

    (@andredistel)


    9 years, 4 months ago

    Hey guys,

    thanks again for the qiuck help on my last question. I am currently trying to match my photography portfolio page with my new wordpress virtue theme. I know it won’t be a perfect match and that’s ok.

    I would like to have a full size header with the logo always at the left end of the header and the menu always on the right end of the menu. You can find an example on my portfolio site at andredistel.photoshelter.com. My WordPress site, I’d like to adapt (the header at least) can be seen at https://testdrive.andredistel.com/landscape-photography-blog/

    How can I do this in CSS?

    Thank you ??

    André

Viewing 4 replies - 1 through 4 (of 4 total)
  • hannah

    (@hannahritner)

    Hey André,
    Try adding this to your custom css box in Theme Options > Advanced Settings:

    @media (min-width: 992px) {
.col-md-4.clearfix.kad-header-left {
    width: 24%;
}
.col-md-8.kad-header-right {
    width: 76%;
}
}

    Is that what you were thinking? Hope it helps!

    Hannah

    If i’m reading correctly this will give you the fullwidth header style:

    .headerclass > .container {
    width: 100%;
}

    Hannahs css will make the menu line up a better. You can use both.

    Kadence Themes

    Thread Starter andredistel

    (@andredistel)

    Perfect :-). The combination of both gave me the desired result. Much appreciated.

    Ok, two last questions :-). I think then I am done.

    1) How can I restrict the logo size in the header? Uploading a smaller logo works but I can’t match the logo size of my other page for some reason. Is there a way to restrict height or width in CSS?

    2) How can I align the menu vertically in the center? It seems that it is top aligned as per default setting.

    Thanks again very much,
    André

    Thread Starter andredistel

    (@andredistel)

    Sorry, answered both on my own with a bit of research in the forums ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Full width header, logo left and menu right aligned’ is closed to new replies.