Home Forums ePix Support Logo & Menu Position on wide site layout

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #87942

    Tim Hensel
    Participant

    Hi Andy

    I hope you’re well.

    Re my site https://www.timhenselphotography.com – I like the wide site layout for blog posts, as it means nice big images. However, this means the logo in the header goes all the way over to the left and the menu to the right – see for example https://www.timhenselphotography.com/wedding-photography-hargate-hall/

    If I use the boxed content layout, or a floating header, they’re next to one another in the middle, which for me looks better (and matches the pages on the site) – see e.g. https://www.timhenselphotography.com/prices/

    However, using a floating header on blog posts creates an issue in that it floats over the post title. I don’t want to disable the title and put it in as a heading (which I do on pages) as this messes up the continuity of appearance of the blogroll page somewhat.

    Is there a way with CSS or such like to put the logo and menu in the correct configuration – i.e. together in the middle – using a “normal” header?

    Many thanks

    Tim

    #87944

    Tim Hensel
    Participant

    Just a further thought – if the boxed content layout could be made a bit wider (in terms of the central column of content), that might work well…

    Cheers

    Tim

    #87950
    Andy
    Andy
    Keymaster

    Hi Tim,

    I’m a little confused. The menu and logo appear together and the content is wide? All the links above do not seem to match the description you’ve given.

    If you wanted to make the header wider, you can use something like the following in Appearance > Theme Options > Customize > Custom CSS:

    body #primary-wrapper.header_float.horizontal-layout #header {max-width:1220px;}

    #87953

    Tim Hensel
    Participant

    Hi Andy

    I stupidly set it back to the non-wide-site layout for blog pages yesterday after I posted this, so it’s no wonder you can’t see the difference. Sorry!

    I’ve set it back now, but there are links to some screenshots here too:

    Wide apart: https://www.evernote.com/l/AX4jpDGWThpLqZOuuw6Y2jMTdH5n8TbLHwYB/image.png
    https://www.timhenselphotography.com/wedding-photography-disley-cheshire-lyme-park/

    Close together: https://www.evernote.com/l/AX5-x6PY0hFGg6Eovm99NP1LK_WTXV4VmtQB/image.png
    https://www.timhenselphotography.com/prices/

    I’d like them close together on all the pages and posts if possible.

    Hope that makes sense now!

    I’ll try your CSS and play with the numbers in the mean time 🙂

    Best

    Tim

    #87963
    Andy
    Andy
    Keymaster

    Hi Tim,

    If you want just the header together, try this:

    body #primary-wrapper.horizontal-layout.tva-wide-layout #header-wrap {max-width:1050px;} – Adjust accordingly.

    #87966

    Tim Hensel
    Participant

    That worked perfectly, excellent as always, thanks Andy 🙂

    #87968

    Tim Hensel
    Participant

    Actually it’s caused a problem with the menu bar on some pages – see below:

    https://www.evernote.com/l/AX6vDwZKbpRCa7d9zKUW53ISpc33dLL8liUB/image.jpg

    #87974
    Andy
    Andy
    Keymaster

    Hi TIm,

    I’m confused again – if you remove the CSS above, those pages have the menu together, not full width?

    #87977

    Tim Hensel
    Participant

    Sorry for being obtuse! If I remove it, the items in the menus on blog pages go wide apart.

    If I put it in, they go close together (as desired), BUT the translucent menu bar on the homepage is no longer full width.

    #87995

    Tim Hensel
    Participant

    Hi Andy – sorry to be a pain – did you find a solution for this? Or am I still mumbling my description?
    Many thanks – Tim

    #88025
    Andy
    Andy
    Keymaster

    Hi Tim,

    That’s strange, my post doesn’t appear. Try replacing the CSS above with:

    body #primary-wrapper.horizontal-layout #header {max-width:1350px;}

    #88031

    Tim Hensel
    Participant

    Thanks Andy, I’ll give it a try.

    Thanks again for all your help.

    #88035

    Tim Hensel
    Participant

    Worked like a charm, thank you.

    For the benefit of the forum, I added the following CSS as well to centre it in the header (as it had gone off to the left):

    body #primary-wrapper.horizontal-layout #header {margin: auto}

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.