Add Image To Top of Page Before Menus

Archives premium themes
#1

I added an image to the very top off the Inspirebook theme using hook function custom_rtp_hook_begin_body(), however the main content and collapse menu leaves white space on the top of the page when scrolling.

I’m trying to place an image on the top of the header like this http://www.vh1.com/ and/or this http://bigspotteddog.github.io/ScrollToFixed/.

Could you advise what CSS needs to be changed or what can be done to accomplish this?

Thanks in advance.

#2

Hello Charla,
Can you provide me a site url?

#3

I no longer have the code applied to the site that I tried it on because it is live. However, if you use Firefox Developer Tool and Inspect Element and place and image above the menus you will see what I’m talking about. First example attached showing the image above the menu.

Attachment Link(s):

http://rtcamp.com/wp-content/uploads/rtMedia/topics/66195/2014/06/RTCamp-sceen-1.png

#4

Second example attached showing the image scrolls up with the main body content.

The collapse menu stays fixed along with the logo and nav bar.

Attachment Link(s):

http://rtcamp.com/wp-content/uploads/rtMedia/topics/66197/2014/06/RTCamp-sceen-2.png

#5

Hello Charla,
As per you said above “I no longer have the code applied to the site”. Are you still need the help on this topic?

#6

Yes, I am still in need of help on this topic.

If you try it on RTCamp’s demo site using FireFox Web Developer Tool > Inspect Element then Edit HTML and place an Image after the tag you will see what I mean.

I added a sample as .txt it will have to be renamed as .html

Any help would be appreciated.

Attachment Link(s):

http://rtcamp.com/wp-content/uploads/rtMedia/topics/66237/2014/06/rtMedia.txt

#7

Hello Charla,

HTML markup is following

CSS Codes are following

div.header-top {  
position: relative;  
background: #666;  
z-index: 1000;  
height: 40px;  
}  

div.rtp-fixed {  
height: 40px;  
top: auto;  
position: fixed;  
background: #666;  
width: 100%;  
}

Try above codes and let me know if it works.

#8

Thank you. It works good however, the only problem I’m having now is on mobile the menu goes under the div.header-top. I created the following but it didn’t help.

@media(min-width: 330px) { div.header-top { height: 50px; position: relative; background: #000; z-index: 1000;} }  
@media(min-width: 330px) { div.rtp-fixed { height: 50px; top: auto; position: fixed; background: #000; width: 100%;} }

I included a screen capture.

Attachment Link(s):

http://rtcamp.com/wp-content/uploads/rtMedia/topics/66382/2014/06/screenshot-mobile.jpg

#9

Hello Charla,
I would be great if you share site url, So I can debug the issue.

Thanks

#10

Also, I found out that it shows fine on Android running FireFox browser and iPhone, but when you expand the mobile menu it shows over the logo and area to make the menu collapse back.

On Android phones running the stock browser or other browsers such as Dolphin, Next Browser, etc. the menu doesn’t show at all and shows like the screenshot provided above.

Here is the screenshot of FireFox browser on an Android phone.

Attachment Link(s):

http://rtcamp.com/wp-content/uploads/rtMedia/topics/66499/2014/06/screenshot-mobile-menu.png

#11

this was a private reply with post_id 66501

#12

Add the following codes in css file.

@media only screen and (max-width: 40em) {  
.rtp-slide-panel { top: 98px; }  
}

Let me if this works for you.

#13

Thanks Sagar. It worked perfect.

#14

You are welcome Charla !!! :slight_smile:

#15

Since updating to the latest Inspirebook, the css code doesn’t work anymore. Do you have another suggested css code that can be used to show an image/ad on top of the header and side menu bar like the example link I showed in my first post (http://www.vh1.com/). The code is doing like the screenshot I provided prior – leaving a big space above the content. .

If possibly, could it be sticky with the menu bar? Thanks.

#16