"Purchase" Bar
-
Hey guys! I am an community radio station, and I am looking for a way to have a BAR that is static on the top of the screen, even when the user scrolls down. The best example I have is what WordPress uses when you are browsing their templates for purchase.
http://dynamicnewsdemo.wordpress.com/
If you notice, they have a “purchase” bar that follows you, and I would love to have something similar that says to listen live, click here etc….
Can anyone help??
The blog I need help with is: (visible only to logged in users)
-
To fix your top bar in position at the top of your page, add this code to your CSS.
.masthead {
position: fixed;
width: 100%;
z-index: 1000;
} -
Now I see the slider needs to move down to show out from behind the new fixed header. You can do this with
.container {
padding-top: 125px;
}You can play around with the numbers until it sits just where you’d like it to.
-
That is the right idea. Now I just need to have the header be more interactive, so it can link users to the live stream. Is there a CSS code to move the NAV menu with the header? Or at least move it below the header?
-
So, do you want the nav menu in the white bar or do you want a link to a live stream there? Are you planning to keep your logo there on the left? I want to help but I think I need some clarification on what you want.
-
That is the right idea. Now I just need to have the header be more interactive, so it can link users to the live stream. Is there a CSS code to move the NAV menu with the header? Or at least move it below the header?
The nav and white header area with the search and title/description are in separate top level divs, so moving the menu below the white header area is a challenge since this is a responsive width theme that adjusts the placement and design of the page elements for different browser widths/screen sizes.
For a clickable area above the menu and header, such as on the demo sites here, that can be done. What you would do is to create that clickable text or image in a text widget and then we can use position: absolute to move that text widget up and into the top of your site. There will be a bit of space needed above the clickable text widget so that the WordPress.com admin bar doesn’t cover part of it when the site is visited by a logged in WordPress.com user.
If you can create that text widget, and add it to the bottom of your sidebar, we can help you move it up and into position and style it properly. Here are some links on using text widgets for your reference.
- The topic ‘"Purchase" Bar’ is closed to new replies.
WordPress.com Forums 