Image fixed on the right site of page in header


I'm developing the site:

The customer is asking for a "logo" right next to the actual logo.
This is outside the wrapper/container/what you would call it.
See a screenshot of the desired design here:

How should this be executed?

Best regards :slight_smile:

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hello, Lasse!

    Okay, to get you started we're going to break your entire header out of the fixed with, and make it 100% wide. Once we do that, then we're going to do a fake out on the elements to make them look like they do now. We'll do that with this CSS:

    .container_inner.clearfix {
    width: 100%;
    .logo_wrapper {
    margin-left: 25%;
    .header_menu_bottom {
    margin-left: 25%;
    margin-right: 25%

    After you add this, your site will look exactly the same, but we'll have room to add the new logo to the mix. We've got a few options here, all of them are pretty intermediate in terms of pulling them off.

    1. If you're using a child theme, edit the child theme's header to php to add an additional div to hold the W image. Give that div a 12.5% margin-left value in your custom CSS, like so.
    Div example:
    <div id="secondary-logo-W">
    <img src="THE W PIC URL">

    CSS example:
    #secondary-logo-W {
    float: left;
    margin-left: 12.5%;

    It may take a little adjusting, but that should get it working.

    2. If you'd rather try a different track, you can add the W as a background image of your .logo_wrapper, then push the margins with CSS until it aligns as it should. It would be quicker, but also dirtier, to do it this way.

    Does this help?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.