We help IT Professionals succeed at work.

adding image directly above navbar

352 Views
Last Modified: 2014-01-15
Hi Guys,

I would like to add the attached  image directly above my navbar on the following website

http://thedancingsoul.ie

Can it be done??

thank you
banner.png
Comment
Watch Question

Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
sort of, but this is not the right way to create a banner. You should have a separate logo, and the phone numbers should be html:

this will create a background image in your header:
#header-top-container{
background-image: url(http://filedb.experts-exchange.com/incoming/2014/01_w03/828394/banner.png);
background-position: center -20px;
background-repeat: no-repeat;
background-color: #fff;
}

Open in new window

Author

Commented:
Where can i put this???

Author

Commented:
thanks a million!
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
anywhere inside your stylesheet. make sure you change the reference to your image (the url property) from experts-exchange.

Author

Commented:
Ok, i have tried that, put then put a couple of lines into the header.php and its showing at the very top if you look at it, but would love to get it just sitting on top of the nav bar?
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
I'm not sure what you mean. it would be helpful if you attached a graphic of the desired result.

Author

Commented:
Hi,

here is another site i run,

i would like to have it looking like it does here above the nav bar
desired.png
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
what do you want to do with the #logo element that is above the navbar? remove it? move it? hide it?

Author

Commented:
remove it....thanks
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
you need to do a couple of things to clean this up.

1. remove all the html inside the div #header-top-container, and then give it a height:
#header-top-container {
background-image: url(http://tryansolicitors.com/ban3.png);
background-position: center 0;
background-repeat: no-repeat;
background-color: #fff;
height: 80px;
}

Open in new window


2. remove the 'top' property from:
#navigation-wide-dark {
position: relative;
/* top: 18px; */
background: url(images/navigation-wide-dark-shadow.png) top left repeat-x;
height: 54px;
}

Open in new window


3. this image has a white line which should be removed:
http://www.thedancingsoul.ie/wp-content/themes/Primero/images/navigation-wide-dark-shadow.png

4. remove the 'top' property from:
#navigation-wide-dark nav {
/* top: 3px; */
position: relative;
background-color: #7a7a7a;
height: 44px;
background-image: url(images/navigation-wide.png);
background-position: bottom left;
background-repeat: repeat-x;
}

Open in new window

start with those changes, and post what you get. we'll take it from there

Author

Commented:
ok, thats looking much better......thank you!

there is a white line appearing under the nav bar, any way to get rid of that?
Data Scientist
Most Valuable Expert 2014
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
thank you so much!!
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
:)
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.