Hello,
We have no experience in CSS or anything. We’re working on a news website and we thought of some things. Just want to ask some questions regarding header:
1. How are we supposed to remove the gap outside the header and navigation bar (see: http://i.imgur.com/smjDBu1.png)? If possible, we would like to remove the shadow too; we like it flat and borderless.
2. Can we add an image on the background of the header? Something similar to this: http://sports.abs-cbn.com/
3. Finally, can we add an animation when the navbar shrinks similar to the website previously mentioned? We feel like the transition is just too abrupt.
We’re sorry if we’re asking these questions as if we don’t know a thing or two about web design. We’re writers and whatever we’ve done with the website so far, we’re just doing it based on research.
Thank you.
Popped!
Hello Popped,
1. You can eliminate the “gap” by making the site boxed. Just add a background image or color (even white) and the site will be made boxed: http://screencast.com/t/ND1EPkg5kn.
to remove the shadow image add this custom css to the theme panel -> custom css:
.td-header-gradient:before {display:none;}
2. You can add an image to the header using this code (i assume you are using header style 9):
.td-header-style-9 .td-header-sp-logo {
background: white url('http://imgscenter.com/images/2014/09/13/Beauty-of-nature-random-4884759-1280-800.jpg') no-repeat;
background-size:cover;
}
the result: http://screencast.com/t/GmDrXVsxijx
3. The shrinking menu animation from the website you mention is custom built and requires quite a bit of coding. Unfortunately we cannot offer any custom work. You can hire a freelancer to do it for you from sites like http://studio.envato.com
Thank you.
Hello again,
Thanks for the previous assistance. We’ve noticed that the navbar’s width isn’t 100% on width, upon doing research, I stumbled across this website and the illustration in the page nailed what I want to do (http://www.cssnewbie.com/full-width-centered-navigation-bar), i.e. the navbar’s width is the same as the page’s width. I was wondering if this is possible as for the navbar as well as for the header?
Thak you!
Hello Popped,
What you can do is choose a header style from the theme panel that takes full width of the screen example: style 5, 6, 12…etc.
You can see the headers styles here: https://forum.tagdiv.com/header-styles/.
If you want to modify another header style to use 100% width of the screen, that involves a bit of custom work as the website you provided suggests.
Thank you.
