inside-header

  • benclement

    (@benclement)


    1 month, 2 weeks ago

    hello,
    I would like the navigation to be centered at 1460px in the inside header. Currently, the width of the inside header does not extend across the entire length. When I change this in the custom CSS, the height changes and there is a gap between the social icons, which is not what I want, and the navigation slides to the right side, which is also not what I want; it should be centered.
    Can this be adjusted?

    .inside-header {
    max-width: 1460px !important;
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    }

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

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

    (@quantum_leap)

    1 month, 2 weeks ago

    Hello.

    Try add align-items: start; inside the .inside-header selector.

    Thread Starter benclement

    (@benclement)

    1 month, 2 weeks ago

    Thank you for your quick reply. I would like the navigation bar to use the entire width. The social icons are located at the right end of the width. The navigation bar quickly becomes two lines long even though there is still space available. It should use the entire space between the logo and the social icons. Please find a photo attached. I hope you understand what I mean.

    ying

    (@yingscarlett)

    1 month, 2 weeks ago

    The inside header is not using the full length because you’ve set a max-width to it.

    Can you show us a mock up of what you want? it’s not possible to center the navigation if you have a big logo on the left.

    Let me know 🙂

    Thread Starter benclement

    (@benclement)

    1 month, 2 weeks ago

    Hi, thanks for your help.
    Here is a template showing how the navigation should be positioned. The best approach is to use responsive design with the burger menu, which only appears when the browser window is smaller and the social icons are flush with the last navigation item, “Fachkräfte” (skilled workers), and not before.

    • This reply was modified 1 month, 2 weeks ago by benclement.
    George

    (@quantum_leap)

    1 month, 2 weeks ago

    Ok, in your case, if you are keeping the logo size this large, you would need to the following:

    • .inside-header { width: 100%; } to extend the header to the max-width of the container.
    • .inside-header #site-navigation { margin-left: 100px; }. Adjust the value accordingly.
    • Use this filter to adjust the mobile breakpoint.
Viewing 5 replies - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.