Logo cut off on header

[mattvd]

Hi there, I am trying to move the logo up a bit because it is getting cut off at the menu bar by just a little bit. You can see at http://development.uglyopportunities.com

I tried adding this css code to move it up

.header_logo {
margin-top: -15px;!important
}

which works fine when inspecting the element so I added it in the theme options but for some reason it is not showing up as being changed?

Topic

[Jason Bobich]

Just remove the !important part. It isn’t needed here and the way you’re using it is incorrect, as you’re putting it after the semi-colon; this is breaking your CSS.

[mattvd]

Hi I removed the important but still no luck. It looks like the css is getting overridden?

[Jason Bobich]

This is definitely correct; I promise. It’s not being overridden, but instead, it’s just not applied at all.

.header_logo {
	margin-top: -15px;
}

If it doesn’t work it means there is some sort of issue some where else in your custom styles. For example, try putting the snippet at the very top of your Custom CSS before anything else has had a chance to break anything.

I think you need to go through and get a better handle on these styles, and get them more organized. Skimming through I can see other items that are incorrect like other places where !important is placed randomly. I can’t imagine trying to manage all of this from the little Custom CSS option in such a cluttered, unorganized manner. You should really have all this organized and formatted in a custom.css file of a Child theme. The way you’re doing makes it a nightmare when anything goes wrong, as I think you’re starting to see.

Here’s example of how you use the !important declaration:

.whatever {
	background: red !important;
}

You seem to be doing this in a couple places:

.whatever {
	background: red; !important
}

[Author]

Replies