Home>Support>Move logo in header to the left
  1. 9 years, 5 months ago Magus
    Hi, I Work Here

    Hi Christmaslyric4537

    You can reposition the logo to the left using the following in the Custom CSS editor

    #masthead .hgroup .logo img, #masthead .hgroup .site-logo-link img {
margin-left: 0px !important;
}

    Then just add a text widget to the header sidebar above the entry for the social media Icons.

    Let us know how you get on

    Magus

  2. 9 years, 5 months ago christmaslyric4537

    Thanks Magus,

    The logo is now on the left and text is to the right of it. I would like the text to be above the social icons (I did put the text widget above the social widget). I would also like the text to be the same color as the menu text. Speaking of the menu, it’s a different color than the background (on purpose) but I would like it to be the same width as the slider. Can you help with these things please?

    Thanks!

  3. 9 years, 5 months ago Magus
    Hi, I Work Here

    Hi Christmaslyric

    We can fix the header widgets by adding the following to your Custom CSS

    #masthead .hgroup #header-sidebar aside.widget {
    margin-bottom: 10px;
    float: none;
    margin-right: 0px;
    color: #7c5b5b;
}

#masthead .hgroup #header-sidebar {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    display: inline-block;
   }

    You will need to adjust the padding values for the Header Sidebar section to give you a vertical position and spacing that looks best to you.

    For the menu please add this

    .main-navigation ul li {
    width: 20% !important;
}

    This will spread your menu evenly across the width of your slider. Be aware that if you add more menu items you will need to adjust this value.

    Let us know how it goes

    Magus

  4. 9 years, 5 months ago christmaslyric4537

    Thanks Magus,

    The two widgets are lined up on the right now with the text on top. Can we move the social icons to the right? I tried putting into the code “float: right;” but it didn’t move.

    And I’m sorry, I didn’t explain the menu very well….I don’t really want the menu itself spread out to match the width of the slider, I would like the background color to only be as wide as the slider because it doesn’t stop like the header and slider. I want the color to match the width of the rest of the stuff. lol

    Thank you!

  5. 9 years, 5 months ago Magus
    Hi, I Work Here

    Hi Cristmaslyric

    Please remove the snippet for main navigation I gave you and add this

    a.main-navigation {
 max-width: 1080px;
margin-left: auto !important;
margin-right: auto !important;
}

and change the first snippet to this

[code
#masthead .hgroup #header-sidebar aside.widget {
    margin-bottom: 10px;
    float: none;
    margin-right: 0px;
    color: #7c5b5b;
    float: right;
}

    Let us know how you get on

    Magus

  6. 9 years, 5 months ago christmaslyric4537

    Hi Magus,

    Now the social widget is in front of the text widget and the menu, although the same size as the slider now (thanks!), when I scroll down the page it jumps to the left. Please take a look.

  7. 9 years, 5 months ago Magus
    Hi, I Work Here

    Hi Christmaslyric

    Sorry, last alteration to the sidebar targeted the wrong element. Please remove that and add the following which will also fix the sticky menu

    #masthead .hgroup #header-sidebar aside:last-child.widget {
    float: right;
}

#masthead .hgroup #header-sidebar aside.widget {
    margin-bottom: 10px;
    float: none;
    margin-right: 0px;
    color: #7c5b5b;
    }

.sticky .main-navigation {
left: auto !important;
}

    Hope this helps

    Magus

  8. 9 years, 5 months ago christmaslyric4537

    Thanks Magus,

    The header widgets are awesome! The menu still jumps to the left when scolling….any other ideas? I would really appreciate it.

    :)

  9. 9 years, 5 months ago Magus
    Hi, I Work Here

    Hi Christmaslyric

    My fault, typo in the code. Please remove the space between .sticky and .navigation.

    Apologies

    Magus

  10. 9 years, 5 months ago christmaslyric4537

    I am so sorry Magus but it is still jumping to the left when scrolling. I’m wondering if it has anything to do with the code we put in to make the menu the same width as the slider? It has a margin-left attribute to it. Would that interfere at all?

  11. 9 years, 5 months ago Magus
    Hi, I Work Here

    Hi Christmaslyric

    Your site seems to be behaving correctly for me. It may be a caching issue with your browser. Please try refreshing your page with (ctrl)+f5

    Magus

  12. 9 years, 5 months ago Daniel
    Hi, I Work Here

    Hi Christmaslyric4537

    Would you mind letting us know if you have this solved? If not let us know, and we’ll jump right in.

    @Magus much appreciated

    Cheers

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More