Add a dark bar at the top and double the width of my navigation bar - help please

swissmiss

Hi - this is my first post in many, many years. I need help making a few tweaks to my site:
* double the width of my navigation bar - black bar exists (CSS)
* add a bar at the very top in color 204B86 - same width as adjusted navigation bar

Thank you!

swissmiss

Maybe I came across rude by not introducing myself (again) before asking for assistance. Years ago I had a Smugmug site for my photography business. I no longer do that but I have helped several sport teams set up their own websites through the years. I am now working on a site for our school booster club. The site houses 32 separate sports and (in the future) will also house all archive photos from the past years. I am attempting to "mimic" the existing booster website in color and format. I just need a few tweeks to get it close enough. I am requesting help in doing the following:

* double the width/height (height here) of my navigation bar - black bar exists (CSS)
* add a bar at the very top in color 204B86 - same width (HEIGHT) as adjusted navigation bar
* run both bars the entire width of the screen

Thank you in advance for your kind assistance.
Swissmiss

Hikin' Mike

I link to your site would help. Find the clipboard icon on the top left and click on it. Go to 'Edit Signature' and add your site there, include the 'http://'.

Allen

Hikin' Mike wrote: »

I link to your site would help. Find the clipboard icon on the top left and click on it. Go to 'Edit Signature' and add your site there, include the 'http://'.

Click her nickname, it's in the drop.

swissmiss

Thanks guys…. http://lf-scouts.smugmug.com

Hi Allen - you helped me many years ago while I was living in Denver. What a great help you were!

I actually want to double the HEIGHT of the Navigation Bar
Add a darker blue bar to the very top with the same HEIGHT as the adjusted Navigation Bar

I'd like both to stretch the entire width.

Thanks!

Allen

Found this to double menu height. Place in "entire site" CSS.

/* modify top menu */
.sm-page-widget-8795808 {
height: 40px;
line-height: 40px; /* position text vertically */
}

I think your page is set to a static width as the menu is already at 100% width. Couldn't figure
out how to extend it.

Getting top bar is a little more difficult. I added a "spacer" at page top to "entire site" and gave the
widget a black background using CSS. It did extend to browser width.

swissmiss

Allen wrote: »

Found this to double menu height. Place in "entire site" CSS.

/* modify top menu */
.sm-page-widget-8795808 {
height: 40px;
line-height: 40px; /* position text vertically */
}

I think your page is set to a static width as the menu is already at 100% width. Couldn't figure
out how to extend it.

Getting top bar is a little more difficult. I added a "spacer" at page top to "entire site" and gave the
widget a black background using CSS. It did extend to browser width.

Thank you Allen - the height of the navigation bar is great. I now have the following in CSS:

.sm-page-widget-nav {background-color: #000;}
/* modify top menu */
.sm-page-widget-8795808 {
height: 40px;
line-height: 40px; /* position text vertically */
}

Not sure what you meant about adding a "spacer" at page top. I don't see a difference. Also, should I change the "static" width?

Allen

Only way I can think of getting the top bar is add an element there. Or maybe a top page border could be added?

I can add one like this but on NewSmug you can not add direct html. Has to be in a widget and this can not go in the header.
html {border-top: 25px solid red}

The only widget other then logo/photo type or text that can be added in the header is
a "spacer". A spacer can be sized and a black background applied.
You could probably add an image (resembles a bar) as a second log/banner above your current one at the top.

swissmiss

Thank you, Allen. Let's forget the blue line at the top. Is there a way to change the color of the drop down lists to white? I'm trying to make the look of the photo site as close as possible to the top part of this site: http://lfhsboosters.org It is the "parent" site that I will link to.

Also interested in adding a shadow under the slideshow similar to the "parent"