• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization move my navbar from top to bottom on splash page

Need some help with your New SmugMug Site?

Dgrin Challenges

Our Challenges moderator has lined up an new set of challenges for you. The Weekly Word Challenge. Get all the details and participate in the conversation Weekly Word Challenge.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Looking for a little challenge? The Dgrin Mini-Challenges are a great way to challenge yourself. Take a moment to look through past winners and find the current Mini Challenge here.

From Around the Net

Enjoy a few of our favorite articles from around the 'net. If you have something you think we should see, post it here and we'll have a look.

Journeys

Landscapes

Sports

 
Thread Tools Display Modes
Old Mar-14-2011, 05:22 PM
#1
thenimirra is offline thenimirra OP
Loves to Grin
thenimirra's Avatar
move my navbar from top to bottom on splash page
I currently have a nav bar on the bottom of my splash page, but I'd like to bring it up to the top of the page with a line under it to keep the look consistent with the rest of my pages.

Can someone please assist.

www.pictureyourworld.net


Thanks
__________________
Sheba Wheeler -- Picture Your World Photography
www.pictureyourworld.net
http://pictureyourworldphotography.blogspot.com/
http://www.onedayonepicture.com

Last edited by thenimirra; Mar-15-2011 at 04:45 PM.
Old Mar-15-2011, 04:24 AM
#2
thenimirra is offline thenimirra OP
Loves to Grin
thenimirra's Avatar
I figured out how to get the line on my homepage nav bar.

I added: .homepage #navcontainer
{border-bottom: 1px solid #757575;}


But, I would really appreciate it if someone told me how to move the homepage nav bar from the bottom of the page to the top. Thanks

www.pictureyourworld.net
__________________
Sheba Wheeler -- Picture Your World Photography
www.pictureyourworld.net
http://pictureyourworldphotography.blogspot.com/
http://www.onedayonepicture.com
Old Mar-15-2011, 07:04 AM
#3
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by thenimirra View Post
I figured out how to get the line on my homepage nav bar.

I added: .homepage #navcontainer
{border-bottom: 1px solid #757575;}


But, I would really appreciate it if someone told me how to move the homepage nav bar from the bottom of the page to the top. Thanks

www.pictureyourworld.net
All I see on your homepage is a footer and huge logo with the nav under it.
Where exactly do you want it moved?
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Mar-15-2011, 08:32 AM
#4
thenimirra is offline thenimirra OP
Loves to Grin
thenimirra's Avatar
Quote:
Originally Posted by Allen View Post
All I see on your homepage is a footer and huge logo with the nav under it.
Where exactly do you want it moved?

Hi Allen, I would like the navbar to be moved to the top of the page so it looks the way it does on my galleries (portfolio) page.
__________________
Sheba Wheeler -- Picture Your World Photography
www.pictureyourworld.net
http://pictureyourworldphotography.blogspot.com/
http://www.onedayonepicture.com
Old Mar-15-2011, 08:49 AM
#5
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by thenimirra View Post
Hi Allen, I would like the navbar to be moved to the top of the page so it looks the way it does on my galleries (portfolio) page.
First, move all your nav/banner together in one spot in your CSS. It's scatter all over and hard to interpret.
Some of this is the wrong order. .homepage applies to both homepage and any dup homepage.
Code:
.homepage #my_banner {
width: 800px;
height: 500px;
margin: 0 auto;
background: url(http://www.pictureyourworld.net/photos/607735958_tqfBp-L.jpg) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingmethod=image,src='http://www.pictureyourworld.net/photos/607735958_tqfBp-L.jpg'); 
}

.galleries #my_banner,
#my_banner {
width: 400px;
height: 250px;
margin: 0 auto;
background: url(http://www.pictureyourworld.net/photos/607735958_tqfBp-S.jpg) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingmethod=image,src='http://www.pictureyourworld.net/photos/607735958_tqfBp-S.jpg');
}

.featured #my_bannerHP {display: none;}
.featured #my_banner {display: block;}
.galleries #my_bannerHP {display: none;}
.galleries #my_banner {display: block;}

.homepage #my_bannerHP {display: block;}
.featured #my_bannerHP {display: none;}
.featured #my_banner {display: block;}
.galleries #my_bannerHP {display: none;}
.galleries #my_banner {display: block;}



.homepage #navcontainer
{border-bottom: 1px solid #757575;}

.galleries #navcontainer
{border-bottom: 1px solid #757575;}
.galleries #my_banner {display: none !important;}

.galleries #navcontainer {margin-top: 25px !important;}

.featured #navcontainerHP {display: none;}
.featured #navcontainer {display: block;}
.galleries #navcontainerHP {display: none;}
.galleries #navcontainer {display: block;}

.featured  #navcontainer,
.galleries #navcontainer,
#navcontainer {
display: block;
margin-top: 5px;
}

.featured #navcontainerHP {display: none;}
.featured #navcontainer {display: block;}
.galleries #navcontainerHP {display: none;}
.galleries #navcontainer {display: block;}

#navcontainer {
    display: block;
    margin-top: 10px;
    padding: 0px 0px 10px 0px;
    border-bottom: 1px solid #757575;
    margin: 0 px 50px 25px 50px; /* top right bottom left */
}


.menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

.menu ul li { 
    display: inline; 
}

.menu ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #000000;
    background-color: none;
}

.menu ul li a:hover {
    color: #000000;
    background-color: #6699CC;
}
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor

Last edited by Allen; Mar-15-2011 at 09:02 AM.
Old Mar-15-2011, 09:06 AM
#6
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by thenimirra View Post
....
Next step is placing the html in the correct order for the nav's and
banner's. Delete the nav/banner from your footer and place in your header
like this.
Code:
<div id="navcontainerHP" class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Portfolio</a></li>
<li><a href="/gallery/3474249_DwiNf">Services/Fees</a></li>
<li><a href="/Clients">Clients</a></li>
<li><a href="/gallery/3474149_kDBT7">About Me</a></li>
<li><a href="/gallery/4452767_CdifC">Contact</a></li>
<li><a href="http://shebawheeler.smugmug.com/gallery/13104313_qsB4L#950072308_dB8F2">Photo Packages</a></li>
<li><a href="http://www.pictureyourworldphotography.blogspot.com">Blog</a></li>
</ul>
</div>

<div id="my_bannerHP">
<a href="http://pictureyourworld.net">
<img src="/img/spacer.gif" alt="" width="542" border="0" height="113"></a>
</div>

<div id="my_banner"><a href="http://www.pictureyourworld.net/">
<img src="/img/spacer.gif" alt="" width="400" border="0" height="215"></a>
</div>
<div id="navcontainer" class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Portfolio</a></li>
<li><a href="/gallery/3474249_DwiNf">Services/Fees</a></li>
<li><a href="/Clients">Clients</a></li>
<li><a href="/gallery/3474149_kDBT7">About Me</a></li>
<li><a href="/gallery/4452767_CdifC">Contact</a></li>
<li><a href="http://shebawheeler.smugmug.com/gallery/13104313_qsB4L#950072308_dB8F2">Photo Packages</a></li>
<li><a href="http://www.pictureyourworldphotography.blogspot.com">Blog</a></li>
</ul>
</div>
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Mar-15-2011, 11:48 AM
#7
thenimirra is offline thenimirra OP
Loves to Grin
thenimirra's Avatar
OH NO!!! I deleted everything thing from the footer, but the navbar on the homepage is still at the bottom and the slideshow on the galleries page is very tiny when it should take up half of the page. I think I did something wrong, Allen. Please help!
__________________
Sheba Wheeler -- Picture Your World Photography
www.pictureyourworld.net
http://pictureyourworldphotography.blogspot.com/
http://www.onedayonepicture.com

Last edited by thenimirra; Mar-15-2011 at 12:26 PM.
Old Mar-15-2011, 01:56 PM
#8
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by thenimirra View Post
OH NO!!! I deleted everything thing from the footer, but the navbar on the homepage is still at the bottom and the slideshow on the galleries page is very tiny when it should take up half of the page. I think I did something wrong, Allen. Please help!
Remove the extra banner from your footer.
Code:
<div id="my_bannerHP">
<a href="http://pictureyourworld.net">
<img src="/img/spacer.gif" alt="" width="542" border="0" height="113">
</a></div>
Change to this. Then we'll check each page and see if it all works.
Code:
#my_bannerHP {
   width: 800px;
   height: 500px;
   margin: 0 auto;
   background: url(http://www.pictureyourworld.net/photos/607735958_tqfBp-L.jpg) no-repeat;
  _background: none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
     sizingmethod=image,src='http://www.pictureyourworld.net/photos/607735958_tqfBp-L.jpg'); 
}

#my_banner {
   width: 400px;
   height: 250px;
   margin: 0 auto;
   background: url(http://www.pictureyourworld.net/photos/607735958_tqfBp-S.jpg) no-repeat;
  _background:none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
     sizingmethod=image,src='http://www.pictureyourworld.net/photos/607735958_tqfBp-S.jpg');
}

      /* hide everywhere */
#my_bannerHP {display: none;}

      /* turn back on homepage galleries featured */
.homepage  #my_bannerHP {display: block;}

      /* turn off duplicate homepages*/
.galleries #my_bannerHP,
.featured #my_bannerHP {display: none;}

      /* hide on homepage galleries featured */
.homepage #my_banner   {display: none;}

      /* turn back on */
.featured #my_banner {display: block;}


#navcontainer {
    margin-top: 10px;
    padding: 0px 0px 10px 0px;
    border-bottom: 1px solid #757575;
}

      /* turn off homepage galleries featured */
.homepage #navcontainer {display: none;}

      /* turn back on for duplicate homepages */
.galleries #navcontainer,
.featured #navcontainer {display: block;}

      /* hide everywhere */
#navcontainerHP {display: none;} 

      /* turn back on homepage galleries featured */
.homepage #navcontainerHP {display: block; margin-top: 10px;}

      /* turn off  for duplicate homepages*/
.galleries #navcontainerHP,
.featured #navcontainerHP {display: none;}
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Mar-15-2011, 02:38 PM
#9
thenimirra is offline thenimirra OP
Loves to Grin
thenimirra's Avatar
Allen, I removed the extra banner from the footer and I think I made the proper changes in CSS.

But the slideshow on the galleries page is still small

and the navbar on the home page is still at the bottom.

Now I see what you were talking about with the code being all over the place, but that's been years and years worth of tweaking trying to get things to work. Thanks for your help.
__________________
Sheba Wheeler -- Picture Your World Photography
www.pictureyourworld.net
http://pictureyourworldphotography.blogspot.com/
http://www.onedayonepicture.com
Old Mar-15-2011, 03:55 PM
#10
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by thenimirra View Post
Allen, I removed the extra banner from the footer and I think I made the proper changes in CSS.

But the slideshow on the galleries page is still small

and the navbar on the home page is still at the bottom.

Now I see what you were talking about with the code being all over the place, but that's been years and years worth of tweaking trying to get things to work. Thanks for your help.
I just replaced all your nav and banner CSS with what I posted and the
homepage nav was at the top.

Ask jfriend in the HTML5 slideshow sticky thread about the size.
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Mar-15-2011, 04:07 PM
#11
thenimirra is offline thenimirra OP
Loves to Grin
thenimirra's Avatar
when I look at the page, the navbar is on the bottom on http://www.pictureyourworld.net/ and I want it to be on the top the way it appears on http://www.pictureyourworld.net/galleries
__________________
Sheba Wheeler -- Picture Your World Photography
www.pictureyourworld.net
http://pictureyourworldphotography.blogspot.com/
http://www.onedayonepicture.com
Old Mar-15-2011, 04:17 PM
#12
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by thenimirra View Post
when I look at the page, the navbar is on the bottom on http://www.pictureyourworld.net/ and I want it to be on the top the way it appears on http://www.pictureyourworld.net/galleries
Remove all this
Code:
#my_bannerHP {
   width: 800px;
   height: 500px;
   margin: 0 auto;
   background: url(http://www.pictureyourworld.net/photos/607735958_tqfBp-L.jpg) no-repeat;
  _background: none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
     sizingmethod=image,src='http://www.pictureyourworld.net/photos/607735958_tqfBp-L.jpg'); 
}

#my_banner {
   width: 400px;
   height: 250px;
   margin: 0 auto;
   background: url(http://www.pictureyourworld.net/photos/607735958_tqfBp-S.jpg) no-repeat;
  _background:none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
     sizingmethod=image,src='http://www.pictureyourworld.net/photos/607735958_tqfBp-S.jpg');
}

     /* hide everywhere */
#my_bannerHP {display: none;}

      /* turn back on homepage galleries featured */
.homepage  #my_bannerHP {display: block;}

      /* turn off duplicate homepages*/
.galleries #my_bannerHP,
.featured #my_bannerHP {display: none;}

      /* hide on homepage galleries featured */
.homepage #my_banner   {display: none;}

      /* turn back on */
.featured #my_banner {display: block;}

#navcontainer {
    margin-top: 10px;
    padding: 0px 0px 10px 0px;
    border-bottom: 1px solid #757575;
}

      /* turn off homepage galleries featured */
.homepage #navcontainer {display: none;}

      /* turn back on for duplicate homepages */
.galleries #navcontainer,
.featured #navcontainer {display: block;}

      /* hide everywhere */
#navcontainerHP {display: none;} 

      /* turn back on homepage galleries featured */
.homepage #navcontainerHP {display: block; margin-top: 10px;}

      /* turn off  for duplicate homepages*/
.galleries #navcontainerHP,
.featured #navcontainerHP {display: none;}

}

.featured #my_bannerHP {display: none;}
.featured #my_banner {display: block;}
.galleries #my_bannerHP {display: none;}
.galleries #my_banner {display: block;}


.homepage #my_bannerHP {display: block;}
.featured #my_bannerHP {display: none;}
.featured #my_banner {display: block;}
.galleries #my_bannerHP {display: none;}
.galleries #my_banner {display: block;}

.homepage #navcontainer
{border-bottom: 1px solid #757575;}
.homepage #navcontainer {margin-top: 25px !important;}

.galleries #navcontainer
{border-bottom: 1px solid #757575;}
.galleries #my_banner {display: none !important;}

.galleries #navcontainer {margin-top: 25px !important;}

.featured #navcontainerHP {display: none;}
.featured #navcontainer {display: block;}
.galleries #navcontainerHP {display: none;}
.galleries #navcontainer {display: block;}

.featured  #navcontainer,
.galleries #navcontainer,
#navcontainer {
display: block;
margin-top: 5px;
}

.featured #navcontainerHP {display: none;}
.featured #navcontainer {display: block;}
.galleries #navcontainerHP {display: none;}
.galleries #navcontainer {display: block;}

#navcontainerHP {display: none;} 
.homepage #navcontainerHP {display: none;}
.homepage #navcontainer {
display: block;
margin-top: 5px;
}
replace with this
Code:
#my_bannerHP {
   width: 800px;
   height: 500px;
   margin: 0 auto;
   background: url(http://www.pictureyourworld.net/photos/607735958_tqfBp-L.jpg) no-repeat;
  _background: none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
     sizingmethod=image,src='http://www.pictureyourworld.net/photos/607735958_tqfBp-L.jpg'); 
}

#my_banner {
   width: 400px;
   height: 250px;
   margin: 0 auto;
   background: url(http://www.pictureyourworld.net/photos/607735958_tqfBp-S.jpg) no-repeat;
  _background:none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
     sizingmethod=image,src='http://www.pictureyourworld.net/photos/607735958_tqfBp-S.jpg');
}

      /* hide everywhere */
#my_bannerHP {display: none;}

      /* turn back on homepage galleries featured */
.homepage  #my_bannerHP {display: block;}

      /* turn off duplicate homepages*/
.galleries #my_bannerHP,
.featured #my_bannerHP {display: none;}

      /* hide on homepage galleries featured */
.homepage #my_banner   {display: none;}

      /* turn back on */
.featured #my_banner {display: block;}


#navcontainer {
    margin-top: 10px;
    padding: 0px 0px 10px 0px;
    border-bottom: 1px solid #757575;
}

      /* turn off homepage galleries featured */
.homepage #navcontainer {display: none;}

      /* turn back on for duplicate homepages */
.galleries #navcontainer,
.featured #navcontainer {display: block;}

      /* hide everywhere */
#navcontainerHP {display: none;} 

      /* turn back on homepage galleries featured */
.homepage #navcontainerHP {display: block; margin-top: 10px;}

      /* turn off  for duplicate homepages*/
.galleries #navcontainerHP,
.featured #navcontainerHP {display: none;}
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Mar-15-2011, 04:26 PM
#13
thenimirra is offline thenimirra OP
Loves to Grin
thenimirra's Avatar
Cool! the navbar is now on the top of the page, but somehow I dropped the line underneath it?

it has something to do with this "border-bottom: 1px solid #757575;"

but I don't know where to put it.
__________________
Sheba Wheeler -- Picture Your World Photography
www.pictureyourworld.net
http://pictureyourworldphotography.blogspot.com/
http://www.onedayonepicture.com
Old Mar-15-2011, 04:48 PM
#14
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by thenimirra View Post
Cool! the navbar is now on the top of the page, but somehow I dropped the line underneath it?

it has something to do with this "border-bottom: 1px solid #757575;"

but I don't know where to put it.
Change this
Code:
      /* turn back on homepage galleries featured */
.homepage #navcontainerHP {display: block; margin-top: 10px;}
to this
Code:
      /* turn back on homepage galleries featured */
.homepage #navcontainerHP {
   display: block;
   padding: 10px 0;
   border-bottom: 1px solid #757575;
}
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Mar-15-2011, 04:51 PM
#15
thenimirra is offline thenimirra OP
Loves to Grin
thenimirra's Avatar
HOT DAMN, that worked.

how can I fed ex you a beer or bottle of wine, tequila, vodka or something Allen?

pick your poison.

Also, I put a message on the Jfriend slideshow page to see if I can figure out why the slideshow is displaying small.
__________________
Sheba Wheeler -- Picture Your World Photography
www.pictureyourworld.net
http://pictureyourworldphotography.blogspot.com/
http://www.onedayonepicture.com
Old Mar-15-2011, 04:53 PM
#16
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by thenimirra View Post
HOT DAMN, that worked.

how can I fed ex you a beer or bottle of wine, tequila, vodka or something Allen?

pick your poison.

Also, I put a message on the Jfriend slideshow page to see if I can figure out why the slideshow is displaying small.
See, we finally got there, just takes some patience.
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Mar-15-2011, 04:54 PM
#17
thenimirra is offline thenimirra OP
Loves to Grin
thenimirra's Avatar
No, it took YOUR patience. You could have given up at any time but you didn't. Thanks for sticking it out with me, Allen!
__________________
Sheba Wheeler -- Picture Your World Photography
www.pictureyourworld.net
http://pictureyourworldphotography.blogspot.com/
http://www.onedayonepicture.com
Tell The World!  
Similar Threads Thread Starter Forum Replies Last Post
Navbar that shows which link is the current page jfriend Legacy SmugMug Customization 506 Aug-09-2013 10:32 AM
Complicated element move on page - help! TalkieT Legacy SmugMug Customization 2 Feb-17-2010 05:58 PM
Move buttons that appear over NavBar jim1-5 Legacy SmugMug Customization 0 May-27-2009 01:50 AM
Splash page clgnemesis Legacy SmugMug Customization 14 Nov-03-2007 10:35 PM
Trouble getting seperate gallery page from navbar Steve Knight Photo Legacy SmugMug Customization 17 Aug-18-2007 08:46 PM


Thread Tools
Display Modes

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump