Help moving a logo on a wordpress theme

dragosdydy · Jun 7, 2013

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.

nesterdwarf · Jun 7, 2013

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

HTH
ND

dragosdydy · Jun 7, 2013

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

nesterdwarf · Jun 8, 2013

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

dragosdydy · Jun 8, 2013

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!

Help moving a logo on a wordpress theme

dragosdydy

Junior Member

nesterdwarf

Regular Member

dragosdydy

Junior Member

nesterdwarf

Regular Member

dragosdydy

Junior Member

Main Menu

Marketplace

Making Money

BlackHat World