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

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

  • 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


    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

    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;}


    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

    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.


    Tim Hensel
    Participant

    That worked perfectly, excellent as always, thanks Andy 🙂


    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

    Andy
    Andy
    Keymaster

    Hi TIm,

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


    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.


    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

    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;}


    Tim Hensel
    Participant

    Thanks Andy, I’ll give it a try.

    Thanks again for all your help.


    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.