Solved

adding image directly above navbar

Posted on 2014-01-15
14
292 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
0
Comment
Question by:jonathanduane2010
  • 7
  • 7
14 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39782688
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
 

Author Comment

by:jonathanduane2010
ID: 39782741
Where can i put this???
0
 

Author Comment

by:jonathanduane2010
ID: 39782743
thanks a million!
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39782780
anywhere inside your stylesheet. make sure you change the reference to your image (the url property) from experts-exchange.
0
 

Author Comment

by:jonathanduane2010
ID: 39782841
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39782966
I'm not sure what you mean. it would be helpful if you attached a graphic of the desired result.
0
 

Author Comment

by:jonathanduane2010
ID: 39782977
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39782997
what do you want to do with the #logo element that is above the navbar? remove it? move it? hide it?
0
 

Author Comment

by:jonathanduane2010
ID: 39783001
remove it....thanks
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39783016
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
 

Author Comment

by:jonathanduane2010
ID: 39783049
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
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 435 total points
ID: 39783089
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
 

Author Comment

by:jonathanduane2010
ID: 39783122
thank you so much!!
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39783136
:)
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Download a website to hdd 2 50
tag title an image 13 24
bootstrap footer centering and expand problems 7 29
manage footer size 4 11
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now