Dropping header to fit banner
-
Anyone have some CSS (or relevant code) that would allow me to drop the header on my page and add an image (like a banner) above it? When building an old site (www.thebabarazzi.com) I was able to drop some code in a text widget that allowed me to add a header where there wasn’t one, as well as a menu.
Anyone got any code for doing something similar with the Bromley theme?
The blog I need help with is: (visible only to logged in users)
-
Hi,
That should be possible with the Bromley theme. However it would help if you can add your header image first, so then me or other users here can work on the CSS and place the banner on top and menu header below it as requested.
-
Hey, hfzrhmn. Not sure what you mean. The header is already present on the page in question (see above). Did you mean put the header here in the comments? (Not sure how to do that). I also don’t have the banner ready, but if there was some stock code, then I could drop images when needed.
Also, looking back at the old site (thebabarazzi.com), I realized that the code to place header and menu was actually html placed in a “Header” widget.
-
When you say, “header” are you talking about adding space above the orange menu section? or above the header image you have with the bridge?
-
Hey, thesacredpath. I’m looking to add some code that would make space between the header (bridge) and the menu bar above it, and would also give me the option to drop a banner in that space.
Thanks!
-
You can play with the top padding value in the following CSS to get the spacing you desire. For the image, you would use a background declaration such as the one I have and replace URL_OF_IMAGE between the quote marks with the URL of the image you upload to your media library. The image you create should be the same width as the header image, 1140px if you wish it to align.
.main { background: url("URL_OF_IMAGE") no-repeat scroll center top / contain rgba(0, 0, 0, 0); padding-top: 200px; } -
thesacredpath, you are a gentleman and a scholar! Works beautifully.
Now if I wanted to make that banner click-able, say to a page on my blog, how might I do that?
-
Hmmm, linking that image is kind of a no-go since HTML cannot be added to CSS. There are some hack-ish tricks to do this, but they don’t work well with responsive width themes, such as Bromley, and especially the way the Bromley theme HTML is structured (no overall container div).
-
-
I took another look at the structure of the HTML and CSS in Bromley, and there is a little bit of trickery that might work. What you would do is to create the image, and then insert it into a text widget in the sidebar and then we could try using the trickery to move it up and into the location above the header image. The following two links on text widgets should get you started, if you want to try it, and then we can work on getting it up and into position.
-
-
I’ve dropped a mock image (not the official one) into a text box at the bottom of the page. It looks like a mini-banner of sorts. What next you think?
-
Great! I would suggest dropping it in the right sidebar instead since the right sidebar and the main content area (including the header) would then all be in the same parent div, which makes it much more likely we can succeed with the moving.
-
-
Give this a shot and see what you think.
.main { padding-top: 150px; } #text-10 { background: rgba(0, 0, 0, 0); left: 0; margin-left: 20px; margin-right: 20px; padding: 0; position: absolute; top: 0; width: 100%; } -
I dig it! Looks cool. Only, the banner is not clickable. Unless I need to do something on my end within the CSS to make it so.
-
You need to link the image with HTML from within the text widget. The basic code would be this:
<a href="LINK_URL"><img src="IMAGE_URL" title="" alt="" /></a>I would suggest including title and alt tags, because the search engines like that. Just put the tag content between the double quote marks.
-
Alright. Got it to work! It’s a little bit wonky in mobile format, but I can live with that for now. Obviously, with a new toy I now have other questions on how to play with this, but won’t bother you with them at this point.
You were a huge help!
Thanks, again.
-
You are welcome, and when you are ready for the other questions, you know where we are. :)
- The topic ‘Dropping header to fit banner’ is closed to new replies.
WordPress.com Forums 