• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization Dropdown Navbar help thread

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
Page 95  of  129
Old Mar-07-2012, 02:27 AM
#1881
Lemur Lover is offline Lemur Lover
Wildlife Photographer
Lemur Lover's Avatar
Quote:
Originally Posted by Allen View Post
The 2nd info gallery is set to Smugmug style. Set it to journal (old) on the gallery settings page.
Hi Al,

Making a few changes to my navbar and come a little unstuck with a couple of things. The first one's probably a real simple fix but I just can't seem to figure it out: Somehow the last button on my main menu bar "Contact" has slipped down onto a second line, instead of where it used be situated at the end.

Second thing is: I needed to remove a menu in the Khao Kheow Open Zoo drop-down as well as a few flyouts, which seemed to work fine by simply working in the Custom Header panel; i.e. apparently no tweaks necessary in CSS.

I then wanted to change the title of the next menu along (which now reads "Infants & Young Animals" and no problems with that) and turn that from a <a href="#link" title=""> to a <a class="drop" href="#noclick" title=""> as I wish to make it a drop-down (possibly with some 1-stage flyouts as well) which I believe I did OK, but then realising I now need to amend the CSS I looked through all the code I had previously and I'm completely lost as to knowing what to do next.

Not sure if this helps you to help me with this, but here's the current HTML code I've changed:

<!-- Original code by Stu Nicholls of -->
<!-- http://www.cssplay.co.uk/ -->
<!-- Edited for content, formatting, and some elements -->
<!-- Please help support CSSPlay at: -->
<!-- http://www.cssplay.co.uk/support.html -->

<div class="menu">
<ul>

<li><a href="/" title="">Home</a></li>

<li class="navDot">&nbsp;•&nbsp;</li>
<li><a class="drop" href="" title="">Photo Galleries
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class=”moveUL”>
<li><a class="drop" href="#noclick" title="">Birds
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Birds/Birds-Thailand-1/17365494_kHCMWX">Thailand</a></li>
<li><a href="/Birds/Birds-Malaysia/17349215_PNnfHn">Malaysia</a></li>
<li><a href="/Birds/Birds-South-Africa/19024720_gTHSjZ">South Africa</a></li>
<li><a href="/Birds/Birds-Madagascar/19179777_cZ2G7W">Madagascar</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="#noclick" title="">Primates
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Animals/Primates-Thailand-1/17364378_gWVWg5">Thailand</a></li>
<li><a href="/Animals/Primates-Malaysia/17349321_N3MBK8">Malaysia</a></li>
<li><a href="/Animals/Primates-Madagascar/19180260_Grsf39">Madagascar</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="/Animals/Felines-Predators/17349121_27H832" title="">Predators
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#link">Thailand</a></li>
<li><a href="#link">South Africa</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/Animals/Bears/17379134_L5QjQt" title="">Bears</a></li>
<li><a href="/Animals/Elephants/18369150_7FJPZz" title="">Elephants</a></li>
<li><a href="/Animals/Reptiles-1/17377609_ttjGfr" title="">Reptiles</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="navDot">&nbsp;•&nbsp;</li>
<li><a class="drop" href="#noclick" title="">Khao Kheow Open Zoo
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Zoos/Khao-Kheow-Open-Zoo/21336429_MNHPTS" title="">Introduction</a></li>
<li><a href="/Zoos/Animal-Welfare/21705018_WMRPXW" title="">Animal Welfare</a></li>
<li><a class="drop" href="#noclick" title="">Breeding Programmes</a></li>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#link">White-Handed Gibbon</a></li>
<li><a href="#link">Red-Shanked Douc Langur</a></li>
<li><a href="#link">White-Cheeked Gibbon</a></li>
<li><a href="#link">Siberian Tiger</a></li>
<li><a href="#link">Slender-Tailed Meerkat</a></li>
<li><a href="#link">Lion</a></li>
<li><a href="#link">Malayan Tapir</a></li>
<li><a href="#link">Clouded Leopard</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="#noclick" title="">Special Attractions
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Zoos/es-ta-te/21731074_Vtb4K2">Es-ta-te Camping Resort</a></li>
<li><a href="#link">Flight of the Gibbons</a></li>
<li><a href="#link">Journey to the Jungle</a></li>
<li><a href="#link">African Savanna</a></li>
<li><a href="#link">After Dark</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#link" title="">Getting to Khao Kheow</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="navDot">&nbsp;•&nbsp;</li>
<li><a href="#link" title="">Infants & Young Animals</a></li>
<li class="navDot">&nbsp;•&nbsp;</li>
<li><a href="/gallery/17499170_p8SM9b" title="">About</a></li>
<li class="navDot">&nbsp;•&nbsp;</li>
<li><a href="/" onclick="return false;" class="customContactButton">Contact </a></li>
</ul>
</div> <!-- closes menu -->
<div style="clear: both;"></div>
<!-- End Navbar Code -->

Thanks in advance Al!
__________________
Ashley

http://NatureImpressions.smugmug.com
Old Mar-07-2012, 05:47 AM
#1882
Allen is offline Allen OP
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by Lemur Lover View Post
Hi Al,

Making a few changes to my navbar and come a little unstuck with a couple of things. The first one's probably a real simple fix but I just can't seem to figure it out: Somehow the last button on my main menu bar "Contact" has slipped down onto a second line, instead of where it used be situated at the end.

Second thing is: I needed to remove a menu in the Khao Kheow Open Zoo drop-down as well as a few flyouts, which seemed to work fine by simply working in the Custom Header panel; i.e. apparently no tweaks necessary in CSS.

I then wanted to change the title of the next menu along (which now reads "Infants & Young Animals" and no problems with that) and turn that from a <a href="#link" title=""> to a <a class="drop" href="#noclick" title=""> as I wish to make it a drop-down (possibly with some 1-stage flyouts as well) which I believe I did OK, but then realising I now need to amend the CSS I looked through all the code I had previously and I'm completely lost as to knowing what to do next.

Not sure if this helps you to help me with this, but here's the current HTML code I've changed:
...
Thanks in advance Al!
It all looks fine to me. What's the problem?

Total width needs to be increased so all the main buttons fit on one line. 760PX works for Firefox.
It might need to be a few more pixels for IE.
Code:
      /* style the outer div to give it width */
.menu {
   z-index:99;
   position:relative;    /* Make the container moveable */
   margin: 0 auto 30px;  /* top R/L bottom */
   width:760px;          /* Main bar total width, minimize to center and not wrap to two lines*/
}
__________________
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-07-2012, 06:05 AM
#1883
Lemur Lover is offline Lemur Lover
Wildlife Photographer
Lemur Lover's Avatar
Quote:
Originally Posted by Allen View Post
The 2nd info gallery is set to Smugmug style. Set it to journal (old) on the gallery settings page.
Quote:
Originally Posted by Allen View Post
It all looks fine to me. What's the problem?

Total width needs to be increased so all the main buttons fit on one line. 760PX works for Firefox.
It might need to be a few more pixels for IE.
Code:
      /* style the outer div to give it width */
.menu {
   z-index:99;
   position:relative;    /* Make the container moveable */
   margin: 0 auto 30px;  /* top R/L bottom */
   width:760px;          /* Main bar total width, minimize to center and not wrap to two lines*/
}

Thanks for the fix on the first part Al, I get to that. Although I should perhaps say that before I changed some on my code in the Custom Header the "Contact" button fit right on the end. I'm also using a wide screen iMac and the original Easy Cusomizer navibar I've used until now, with a lot more menu buttons, also fits fine along just the one line.

Anyhow, as to part two, while the HTML I pasted into my last post above should indeed be correct, the issue I'm having is with amending the CSS code so that it brings the new drop-down into play under the "Infants & Young Animals" button. Here's how my current CSS code looks:

.navDot {
font-size: 15pt;
color: #3A6948;
line-height: 22px;
}

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
.menu {
z-index:99;
position:relative; /* Make the container moveable */
margin: 0 auto 30px; /* top R/L bottom */
width:700px; /* Main bar total width, minimize to not wrap to two lines*/
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

/* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */
.menu li {
float:left; /* float right will reverse the main buttons */
text-align:center;
width:auto;
position:relative;
padding: 0;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
text-decoration:none; /* none, overline, underline */
color:#3A6948;
background: rgba(22, 22, 22, .90);
/* border:1px solid black; */ /* optional */
/* border-width:1px 1px 1px 1px; */ /* optional */
font-size:11pt;
font-family: verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif;
width:auto; /* Defines the main box dimensions. */
height:20px; /* How tall your cells are */
line-height:20px; /* vertical text alignment in cell */
padding: 0 4px; /* top/bottom R/L */
min-width: 40px; /* set to smallest text and use R/L padding above to space out */
}

/* main hover */
.menu a:hover, .menu :hover > a {
color:#1AC96B;
background: rgba(22, 22, 22, .90);
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:130px; w\idth:130px;}

/* style the table so that it takes no part in the layout */
.menu table {position:absolute; top:0; left:0;}



/* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */

/* another hack for IE5.5 */
* html .menu ul ul {top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */


/* hide the sub levels and give them a position absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:20px; /* move drop vertically */
left:0; /* move drop horizontally */
width:170px; /* Size of the daughter cells */
}

.menu ul .moveUL {left: -30px;} /* drop under Photo Galleries */

/* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background: rgba(22, 22, 22, .90);} /* if 3rd level exists */

/* style the second level hover */
.menu ul ul a.drop:hover {background: rgba(22, 22, 22, .90);}
.menu ul ul :hover > a.drop {background: rgba(22, 22, 22, .90);}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
color:#3A6948;
background: rgba(22, 22, 22, .90);
height:auto;
line-height:20px;
width:170px;
}

.menu ul ul :hover > a.drop {background: rgba(22, 22, 22, .90);} /* 2nd if 3rd level exists */

/* yet another hack for IE5.5 */
* html .menu ul ul a {width:120px; w\idth:120px;}

/* 2nd level hover */
.menu ul ul a:hover, .menu ul ul :hover > a {
color:#1AC96B;
background: rgba(22, 22, 22, .90);
}



/* ***** LEVEL 3 ***** LEVEL 3 ***** LEVEL 3 ***** */

/* position the third level flyout menu */
.menu ul ul ul {
left:178px;
top:0;
width:150px;
height:auto;
}

.menu ul ul ul li a {color:#3A6948;}
.menu ul ul ul li a:hover {color:#1AC96B;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background: rgba(22, 22, 22, .90);} /* not FF */

/* style the third level hover */
.menu ul ul ul a:hover {background: rgba(22, 22, 22, .90);}
.menu ul ul ul :hover > a {background: rgba(22, 22, 22, .90);} /* 3rd (w/o 4th) 4th hover */

/* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
color:#3A6948; /* hover 2nd > 3rd & 4th */
background: rgba(22, 22, 22, .90); /* hover 3rd > 4th */
height:20px;
line-height:20px;
width:200px;
text-align: left;
}


/* ***** LEVEL 4 ***** LEVEL 4 ***** LEVEL 4 ***** */

/* position the fourth level flyout menu */
.menu ul ul ul ul {
left:150px;
top:0;
width:150px;
height: auto !important;
}

/* 4th level non-hover */
.menu ul ul ul ul li a {
color:#3A6948;
width:150px;
}

/* style the fourth level hover */
.menu ul ul ul ul a:hover {background: rgba(22, 22, 22, .90);}
.menu ul ul ul ul :hover > a {background: rgba(22, 22, 22, .90);}


/* make the 2nd level visible when hover on 1st level */
.menu ul :hover ul {visibility:visible;}
/* make the 3rd level visible when you hover over 2nd level */
.menu ul :hover ul :hover ul {visibility:visible;}
/* make the 4th level visible when you hover over 3rd level */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}
/* keep the 3rd level hidden when you hover on 1st level */
.menu ul :hover ul ul {visibility:hidden;}
/* keep the 4th level hidden when you hover on 2nd level */
.menu ul :hover ul :hover ul ul {visibility:hidden;}

/* End Navbar Code */
__________________
Ashley

http://NatureImpressions.smugmug.com
Old Mar-07-2012, 06:13 AM
#1884
Allen is offline Allen OP
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by Lemur Lover View Post
Thanks for the fix on the first part Al, I get to that. Although I should perhaps say that before I changed some on my code in the Custom Header the "Contact" button fit right on the end. I'm also using a wide screen iMac and the original Easy Cusomizer navibar I've used until now, with a lot more menu buttons, also fits fine along just the one line.

Anyhow, as to part two, while the HTML I pasted into my last post above should indeed be correct, the issue I'm having is with amending the CSS code so that it brings the new drop-down into play under the "Infants & Young Animals" button. Here's how my current CSS code looks:
...
No need to post code, those that can help see it on your site with web tools.

Replace this line one line in your header

<li><a href="#link" title="">Infants &amp; Young Animals</a></li>

with this
Code:
<li><a class="drop" href="#link" title="">Infants &amp; Young Animals
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul> 
        <li><a href="#link">Future Use</a></li>  
        <li><a href="#link">Future Use</a></li>
        <li><a href="#link">Future Use</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Apr-10-2012, 11:48 AM
#1885
dondada is offline dondada
Big grins
hey allen, would this tutorial work for my site and the navbar i have at the bottom of my page?
__________________
-seeteefun
http://juis.smugmug.com
Old Apr-10-2012, 09:03 PM
#1886
Allen is offline Allen OP
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by dondada View Post
hey allen, would this tutorial work for my site and the navbar i have at the bottom of my page?
Not sure, it would probably take quite a bit of work adapting it.
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Apr-11-2012, 08:08 AM
#1887
dondada is offline dondada
Big grins
Quote:
Originally Posted by Allen View Post
Not sure, it would probably take quite a bit of work adapting it.
where should i start other than from scratch?
__________________
-seeteefun
http://juis.smugmug.com
Old Apr-11-2012, 08:44 AM
#1888
Allen is offline Allen OP
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by dondada View Post
where should i start other than from scratch?
Starting from scratch and working with WebDev I inserted new nav html between the red.
Code:
<div id="phoenix-footer" align="center">

<div class="menu">
<ul>
<li><a href="/"> Home </a></li>
<li><a href="/gallery/"> Portfolio
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="#link" title="">Drop 1 Lvl 2</a></li>
        <li><a href="#link" title="">Drop 2 Lvl 2</a></li> 
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/"> Blog </a></li>
<li><a href="/Clients"> Clients </a></li>
<li><a href="/Other/Contact/22375611_V9DhsJ/"> About / Contact </a></li>
</ul>
</div>


<div id="phoenix-nav">
...
Added this CSS. Also for this experiment I temporary increased the footer height to 200px so both navs would be visible.
Code:
/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

      /* style the outer div to give it width */
.menu {
   float:left;
   z-index:99;
   position:relative;    /* Make the container moveable */
   margin: 0 auto 20px;  /* top R/L bottom */
   width:900px;          /* Main bar total width, minimize to not wrap to two lines*/
}

      /* remove all the bullets, borders and padding from the default list styling */
.menu ul {
   padding:0;
   margin:0;
   list-style-type:none;
}

      /* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */
.menu li {
   float:left;          /* float right will reverse the main buttons */
   text-align:center;
   width:auto; 
   position:relative;
   padding: 0;
}

      /* style the links for the top level */
.menu a, .menu a:visited {
   display:block;
   text-decoration:none;  /* none, overline, underline */
   color:white;
   background:rgba(255, 255, 255, .0001);
   font-family:'Shadows Into Light',  'Century Gothic', Tahoma, sans-serif;
   font-size:22px;
   width:auto;         /* Defines the main box dimensions. */
   height:20px;        /* How tall your cells are */
   line-height:20px;   /* vertical text alignment in cell */ 
   padding: 0 29px;    /* top/bottom R/L */
   min-width: 60px;    /* set to smallest text and use R/L padding above to space out */
}

      /* main hover */
.menu a:hover, .menu :hover > a {
   color:black;
   background:rgba(255, 255, 255, .0001);
}

      /* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:130px; w\idth:130px;}

      /* style the table so that it takes no part in the layout */
.menu table {position:absolute; top:0; left:0;}



      /* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */

      /* another hack for IE5.5 */
* html .menu ul ul {top:20px; t\op:21px;}   /* IE gap between main bar and the dropdown items */


      /* hide the sub levels and give them a position absolute so that they take up no room */
.menu ul ul {
   visibility:hidden;
   position:absolute;
   height:0;
   top:-50px;       /* move drop vertically */
   left:0;         /* move drop horizontally   */
   width:120px;    /* Size of the daughter cells */
}

      /* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:rgba(255, 255, 255, .0001);}  /* if 3rd level exists */

      /* style the second level hover */
.menu ul ul a.drop:hover {background:rgba(255, 255, 255, .0001);}
.menu ul ul :hover > a.drop {background:rgba(255, 255, 255, .0001);}

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:white;
   background:rgba(255, 255, 255, .0001);
   height:20px; 
   line-height:20px; 
   width:120px;
   text-align:left;
}

.menu ul ul :hover > a.drop  {background:rgba(255, 255, 255, .0001);}   /* 2nd if 3rd level exists */

      /* yet another hack for IE5.5 */
* html .menu ul ul a {width:120px; w\idth:120px;}

      /* 2nd level hover */
.menu ul ul a:hover, .menu ul ul :hover > a {
   color:#5B7181;
   background:rgba(255, 255, 255, .0001);
}

      /* make the 2nd level visible when hover on 1st level */
.menu ul :hover ul {visibility:visible;}

/* End Navbar Code */
In this screen shot the new nav is above your current nav and the mouse is hovering on Portfolio showing the drop ... err rise.
Attached Images
 
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Apr-11-2012, 09:55 AM
#1889
Allen is offline Allen OP
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by dondada View Post
where should i start other than from scratch?
See this thread for your question about putting it at the top.
http://www.dgrin.com/showthread.php?t=218653
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Apr-25-2012, 02:13 AM
#1890
Patrik is offline Patrik
Big grins
iPhone - Menu doesn't work
Hello,

I've discovered that part of my menu doesn't work on an iPhone. What have I done wrong?

Please, does anyone know why Images at www.patrikwinge.com doesn't work?

Thanks,

Patrik
Old Apr-25-2012, 03:45 AM
#1891
Allen is offline Allen OP
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by Patrik View Post
Hello,

I've discovered that part of my menu doesn't work on an iPhone. What have I done wrong?

Please, does anyone know why Images at www.patrikwinge.com doesn't work?

Thanks,

Patrik
About the only thing I can suggest is try the CSS in the first post.
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Apr-25-2012, 04:41 AM
#1892
Patrik is offline Patrik
Big grins
Thank's Allen. That's the code I've been using. It works on my computer, but not on iPhone. I can't see what's wrong.
Old Apr-25-2012, 09:11 AM
#1893
jacqsallott is offline jacqsallott
jacqsallott
Got so far...
Hi, I've managed to get so far following your instructions. However, I want my navibar to look like the one i created using the easy customiser with the drop-down bit appearing when you hover over the main title. How do I do this? I'm a novice when it comes to HTML. Can you help?
Old Apr-25-2012, 04:40 PM
#1894
Allen is offline Allen OP
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by jacqsallott View Post
Hi, I've managed to get so far following your instructions. However, I want my navibar to look like the one i created using the easy customiser with the drop-down bit appearing when you hover over the main title. How do I do this? I'm a novice when it comes to HTML. Can you help?
Got a link to your site?
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old May-02-2012, 08:34 AM
#1895
Photowhim is offline Photowhim
Beginner grinner
Hi there...I hope I am posting this correctly. I have read the thread until I can barely see over the last week, and probably missed where this was addressed, if it is even possible.

I like my regular nav bar and I am looking to just add the coding to make it a drop nav bar. Is there a simple way to do this without starting from scratch? I have figured out how to add the drop links, but cannot seem to figure out what to add to my existing CSS to change it from the regular navbar that I got right here on DGrin to a drop down. Or is that even possible?

If it helps, here is my current CSS for the simple nav bar, from Ivar's simple nav bar tutorial:


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


#navcontainer ul li {
display: inline;
}


#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #9e9e9e;
background-color: transparent;
font-family: 'Handlee', cursive; courier, tahoma, helvetica, georgia, Handwriting-Dakota, chalkboard, myriad pro, Comic Sans MS, tahoma, arial, sans-serif;
font-size: 12pt;
}

#navcontainer ul li a:hover {
color: #ba517d;
background-color: TRANSPARENT;
}
Old May-02-2012, 04:18 PM
#1896
LUKEK is offline LUKEK
Beginner grinner
Thanks Allen for a great tutorial, was stuck on it for days but found your easy walkthrough http://www.digitalgrin.com/showthrea...168571&page=95
Anyways my drop down Nav menu is pretty much complete- its pretty basic. I have a few problems.
1. how do I put dividers in-between the different menus?
2. When trying out my flashy new drop down nav menu in safari (there maybe other problem browsers I dont know) I get problems when moving over to my flyout... the background colour is white and so is the text- you just see white until i scroll over it it turns red. When viewing on firefox there is no problems the text is black and highlights red.
I hope this isnt too confusing as its early morning here and ive been trying to get this menu sorted for agggges!

here is a link to my site. http://lukekarmali.smugmug.com/ http://lukekarmali.smugmug.com/
Old May-02-2012, 08:27 PM
#1897
Allen is offline Allen OP
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by LUKEK View Post
Thanks Allen for a great tutorial, was stuck on it for days but found your easy walkthrough http://www.digitalgrin.com/showthrea...168571&page=95
Anyways my drop down Nav menu is pretty much complete- its pretty basic. I have a few problems.
1. how do I put dividers in-between the different menus?
...

here is a link to my site. http://lukekarmali.smugmug.com/ http://lukekarmali.smugmug.com/
Try this, assuming you mean the drop and flyout.
Code:
      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:black;
   background:white;
   height:auto; 
   line-height:20px; 
   width:150px;
   border: 1px solid red;
   border-width:1px 0 0 0;
}
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old May-02-2012, 08:34 PM
#1898
Allen is offline Allen OP
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by LUKEK View Post
2. When trying out my flashy new drop down nav menu in safari (there maybe other problem browsers I dont know) I get problems when moving over to my flyout... the background colour is white and so is the text- you just see white until i scroll over it it turns red. When viewing on firefox there is no problems the text is black and highlights red.
This will make the flyout colors same as the drop.
Code:
.menu ul ul ul li a {color:black;}
.menu ul ul ul li a:hover {color:blue;}
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old May-02-2012, 08:39 PM
#1899
Allen is offline Allen OP
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by LUKEK View Post
...
Remove the red or exta < at the top of your header html.

&lt;
<div class="menu">


Add the red to the end.

<li><a href="/" onclick="return false;" class="customContactButton">Contact Me</a>
</li></ul>
</div>
<div style="clear: both;"></div>

Or replace the whole header with this. Cleaned up some links and switched to relative links.
Code:
<div class="menu">
<ul>
   <li><a href="/">Homepage</a></li>
   <li><a href="/Photography">All Photography</a></li>
   <li><a class="drop" href="#noclick">Galleries
        <!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
            <li><a href="/gallery/22420395_XjDVDF">South East Asia</a></li>
            <li><a class="drop" href="#noclick">India
                <!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                    <li><a href="/gallery/22411462_Msm6jK">People &amp; Places</a></li>
                    <li><a href="/gallery/22697299_6GS237">Temples,Mosques &amp; Places of Interest</a></li>
                    <li><a href="/gallery/22696945_XMr5Xz">Ladakh</a></li>
                    <li><a href="/gallery/22696784_pmfRPZ">India's Fishermen</a></li>
                    <li><a href="/gallery/22420447_Zk2qXn">Dhobi Wallahs</a></li>
                </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li><a href="/gallery/22420382_pGcDxM">Nepal</a></li>
            <li><a href="/gallery/22420427_FcxfJG">Landscapes Dorset &amp; NZ</a></li>
            <li><a href="/gallery/22696907_nRtpTN">Other</a></li>
            <li><a href="Other1">Corporate Work </a></li>
        </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="https://vimeo.com/karmali/videos">Video</a></li>
   <li><a href="/gallery/22438380_NrKPPf">Info</a></li>
   <li><a href="/gallery/22738723_hG4g9B">Guestbook</a></li>
   <li><a href="/" onclick="return false;" class="customContactButton">Contact Me</a></li>
</ul>
</div>
<div style="clear: both;"></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 May-02-2012, 08:52 PM
#1900
Allen is offline Allen OP
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by LUKEK View Post
...
Check your galleries, some are not showing your customizations. Make sure for each the under "gallery
settings" that "custom" is checked for appearance and "hide owner" is not checked.
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Page 95  of  129
Tell The World!  
Tags
customizatation , navbar
Similar Threads Thread Starter Forum Replies Last Post
DropDown NavBar Positioning and Color CerebrusX Legacy SmugMug Customization 6 Aug-08-2012 09:42 AM
Please Help About Dropdown Navbar wangyunpeng Legacy SmugMug Customization 2 Jul-09-2011 10:51 AM
single dropdown navbar? dogwood Legacy SmugMug Customization 33 Jun-21-2010 08:57 PM
Dropdown Navbar juan14888 Legacy SmugMug Customization 7 Apr-19-2010 05:34 PM
navbar dropdown code errors? amyparsons Legacy SmugMug Customization 20 Jan-09-2009 07:53 AM


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