1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Help moving a logo on a wordpress theme

Discussion in 'Web Design' started by dragosdydy, Jun 7, 2013.

  1. dragosdydy

    dragosdydy Junior Member

    Joined:
    Jan 23, 2012
    Messages:
    116
    Likes Received:
    49
    Location:
    Italy
    Hi guys. I'm working on a project now and i need to move the logo over the Menu bar and because the logo will be over the Menu Bar, the items from the menu bar should be moved a little bit right. I tried a lot of modifications in the CSS file but as I'm not very advanced, i didn't managed to do it without making other things wrong. Can anyone help me please?

    How the page actually looks: http://i.imgur.com/oeVx6Vh.jpg

    How the page should look: http://i.imgur.com/vWXAv0G.jpg

    The theme and website are here: http://leadrights.com/


    Thanks a lot.
     
  2. nesterdwarf

    nesterdwarf Regular Member

    Joined:
    May 30, 2008
    Messages:
    276
    Likes Received:
    539
    Location:
    State of Misery...er, Missouri...
    Changing the following classes should work -

    Change this -

    Code:
    .site-branding {
    float: left;
    padding: 20px 0 0;
    }
    
    to

    Code:
    .site-branding {
    float: left;
    padding: 20px 0 0;
    position: absolute;
    margin-top: -15px;
    z-index: 999;
    }
    
    Change this -

    Code:
    #primary-menu ul {
    margin: 0;
    list-style: none;
    position: relative;
    top: -4px;
    }
    
    to

    Code:
    #primary-menu ul {
    margin: 0;
    list-style: none;
    position: relative;
    top: -4px;
    padding-left: 150px;
    }
    
    You'll have to fiddle with it to get it where you want from there, and it may blow something else up :D

    HTH
    ND
     
    • Thanks Thanks x 1
  3. dragosdydy

    dragosdydy Junior Member

    Joined:
    Jan 23, 2012
    Messages:
    116
    Likes Received:
    49
    Location:
    Italy
    Thanks a lot! I will try it. You are awesome!! :)

    I modified what you said but i have a little problem and i tried to do something but i cant do it as it should.
    After i moved the logo, the whole header moved down, as you can see here: http://i.imgur.com/8NfAw30.jpg

    After that i tried to change this:
    Code:
    .header-core {
        padding: 40px 0;
    }
    to this:
    Code:
    .header-core {
        padding: 40px 0;
            margin-top: 50px;
    }
    But the result is not as i expected, as you can see here: http://i.imgur.com/SKPyqqM.jpg
     
    Last edited: Jun 7, 2013
  4. nesterdwarf

    nesterdwarf Regular Member

    Joined:
    May 30, 2008
    Messages:
    276
    Likes Received:
    539
    Location:
    State of Misery...er, Missouri...
    You don't want to adjust .header-core, that holds your logo and menu. You want to change .header-core back to this -

    Code:
    .header-core {
    padding: 40px 0;
    }
    
    and change this -

    Code:
    #primary-menu {
    height: 65px;
    background: #e6e6e6;
    border-top: 4px solid #d0d0d0;
    position: relative;
    }
    
    to

    Code:
    #primary-menu {
    height: 65px;
    background: #e6e6e6;
    border-top: 4px solid #d0d0d0;
    position: relative;
    margin-top: -50px;
    }
    
    I think that will do what you are wanting.

    HTH
    ND
     
    • Thanks Thanks x 1
  5. dragosdydy

    dragosdydy Junior Member

    Joined:
    Jan 23, 2012
    Messages:
    116
    Likes Received:
    49
    Location:
    Italy
    Thanks a lot. That did the job with a little tweak on the .site-branding class. Thanks a lot, you are a life saver! Not only you helped me, but i learned something too! :)