Custom Header Full Width

  • Resolved greatpages

    (@greatpages)


    4 years, 4 months ago

    Hello everybody,

    I put a lot of time into creating a custom header, including a second image (brand symbol) and a reconfigured secondary navigation. This is the first time I am using flexbox and because of that I am running into some difficulties here. Searching different forums or the web in general didn’t bring desired results, that’s why I am trying to find some help here.
    I didn’t use a plugin to work on my coding abilities and would like to continue this way.

    First of all I would like the title (.custom_content) to be in the center of the header, but still keep it responsive.
    The other thing I couldn’t get to work is setting the header (header#masthead.site-header div.col-full) to full width.

    I am about to add media queries to hide the original site logo (in my case the brand symbol) if displays aren’t wide enough. Just in case if this might be relevant for a solution.
    If you need any more additional information, please let me know. Any help is highly appreciated!

    Thanks and best regards,
    -Bj?rn

    The page I need help with: [log in to see the link]

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

  • Hey @greatpages

    Although I understand you want your title to be centered, it’s not entirely clear where you want the rest to be placed; the cart, search field, logo and main menu.

    If you can explain that (or send a quick screenshot), then that will help.

    Thread Starter greatpages

    (@greatpages)

    Hello Senff,

    thanks for your attempt to help.
    Logo should be on the left (I’ll add a little margin later).
    Next would be the title which should be centered and still responsive.
    Secondary menu and search form should be on the right side.

    I’m going to work on this today, maybe the short break was enough to clear my mind. ??
    Nevertheless any helpful input is highly welcome.

    Thread Starter greatpages

    (@greatpages)

    I just realized that secondary navigation and search form are two separat div’s.
    Therefore I should say the search form should be on the right and directly beneath to the left should be the second navigation.

    Best regards,
    -Bj?rn

    Thread Starter greatpages

    (@greatpages)

    UPDATE:
    I managed to center the site title, but secondary menu and search are not in the same line as the rest. Something makes me believe the div.custom_content is taking too much space and forces the second nav & search into a new line.
    Spent too much time on this and currently I’m not able to clear my mind for a new approach. Maybe someone else has something helpful to add?

    Thread Starter greatpages

    (@greatpages)

    UPDATE 2:
    Sometimes a little distance is helpful to get a different point of view. Just realized that I already reached my goal. Only thing left now is unhooking secondary navigation menu and hook it above header.

    Best regards,
    -Bj?rn

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Custom Header Full Width’ is closed to new replies.