• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 336
  • Last Modified:

adding image directly above navbar

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
0
jonathanduane2010
Asked:
jonathanduane2010
  • 7
  • 7
1 Solution
 
Kyle HamiltonData ScientistCommented:
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

0
 
jonathanduane2010Author Commented:
Where can i put this???
0
 
jonathanduane2010Author Commented:
thanks a million!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Kyle HamiltonData ScientistCommented:
anywhere inside your stylesheet. make sure you change the reference to your image (the url property) from experts-exchange.
0
 
jonathanduane2010Author 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?
0
 
Kyle HamiltonData ScientistCommented:
I'm not sure what you mean. it would be helpful if you attached a graphic of the desired result.
0
 
jonathanduane2010Author 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
0
 
Kyle HamiltonData ScientistCommented:
what do you want to do with the #logo element that is above the navbar? remove it? move it? hide it?
0
 
jonathanduane2010Author Commented:
remove it....thanks
0
 
Kyle HamiltonData ScientistCommented:
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
0
 
jonathanduane2010Author 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?
0
 
Kyle HamiltonData ScientistCommented:
you can remove this entire div and eveything in it:
<div id="header-logo-container">

Open in new window


this image has a white line in it, and should be edited:
images/navigation-wide-dark-shadow.png

OR,
just remove everything from the CSS:
#navigation-wide-dark {
/* position: relative; */
/* background: url(images/navigation-wide-dark-shadow.png) top left repeat-x; */
/* height: 0px; */
}

Open in new window


and add this - you may need to tweak to your liking:
#navigation-wide-dark nav{
box-shadow: 2px 2px 2px rgba(0,0,0,.2);
}

Open in new window

0
 
jonathanduane2010Author Commented:
thank you so much!!
0
 
Kyle HamiltonData ScientistCommented:
:)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 7
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now