Report Blog Entry
Hey guysΒ
here's the code to add a banner above your navigation bar at the top of your profile.
Korb-Kunn Na Krabp ππ»β€Place this code at the TOP of your ABOUTME section!
mess around with "margin-top"Β which creates space above your NavbarΒ , "margin-left", "left", "height"Β & "width".... to get your desired size.
them imputed setting should be okay though. its mainly the "Margin-top"
the Image code inside the <div> section all you need to do in enter your desired size. "810" is the default page size.Β
<style>
nav {
margin-top: 520px;
}
</style>
<style>
div.topbanner {
position: absolute;
top: -0%;
left: 46.3%;
width: 900px;
margin-left: -450px;
height: -193px;
}
</style>
<div class="topbanner">
<img src="IMAGE URL GOES HERE" alt="giphy-2" width="YOUR WIDTH GOES HERE" height="YOUR HEIGHT GOES HERE" class="giphy-embed">
</div>
nav {
margin-top: 520px;
}
</style>
<style>
div.topbanner {
position: absolute;
top: -0%;
left: 46.3%;
width: 900px;
margin-left: -450px;
height: -193px;
}
</style>
<div class="topbanner">
<img src="IMAGE URL GOES HERE" alt="giphy-2" width="YOUR WIDTH GOES HERE" height="YOUR HEIGHT GOES HERE" class="giphy-embed">
</div>
If you find this helpful please feel free to leave a kudos and feedback
uwu β€ππ»ππ»ππ»
Comments
Displaying 3 of 3 comments ( View all | Add Comment )
♥ GrudgySkyes ♥
I attempted to put this on my profile and it covered a majority of my profile and it didn't want to go to the top of my profile. Keep up the hard work, I'm sure I'll be able to do this eventually.
hey. yeah your image has to be the perfect size. otherwise you'll have to use a image resize code. i'm gonna edit the blog and add the resize code for it now. and then you just figure out your wanted dimensions instead of resizing images on a laptop.
where are you looking to put the banner below your navbar ? and not above it?
ps. sorry for the inconvenience ππ»
by πΎππππππππππ™β₯; ; Report
I ended up going with a different code which worked out well. the one I tried from here almost covered my entire page. And you're good, zero inconvenience, all about learning. It's also possible that depending on everyone's layout it could effect the code you've created.
by ♥ GrudgySkyes ♥; ; Report
awww that's brilliant i'm glad you're all sorted now =].
ππ»
it was one of the first codes i made getting back into this lmao. I've had some issues with it myself when using other codes that contradict it lmao π€¦ββοΈπ€¦ββοΈ. ill work on it when i get some spare time lmao. i know how annoying was it! it was doing that with me, like it blows the image up huge lmao. but i fixed it by adding image dimensions to the code lol.
if you need help with anything else feel free to message me and i'll help to the best of my abilities =]
by πΎππππππππππ™β₯; ; Report
Katie
body only works on some devices unfortunately vs the other 2 that work on all
ahhhhh thanks very much :) i've edited the blog and thanks very much for the info :3 =]
by πΎππππππππππ™β₯; ; Report
No problem
by Katie; ; Report
Katie
For top of nav you need to switch body to nav, body will just muck everything up and body to main if you want under nav