Custom Navbar to long for iphone

ko04 · September 3, 2013

Hey everyone,
I have been ignoring this problem for awhile but since I am finally done with my site I can no longer ignore it. I have a custom navbar using a html/css block and I am noticing it is being cut off and not fitting on the iphone. I used this link http://iphone4simulator.com and viewed the css and I can see that it has its own but I don't really know what I should be doing with it or what code to use for just fixing the navbar on mobile phones. Another question I would have is that if its possible to have two different navbars one that is custom like mine and one that is more iphone/mobile phone friendly. I hope I am explaining this well enough and if anyone has any thoughts on this I'd greatly appreciate it. My website is www.k-ophotography.com. Thanks in advance!

KO

The Mechanic · September 4, 2013

Hello,

You will need to write your CSS code for your site to be mobile friendly if you want this to appear correctly on different devices. This means you will have to write additional css that is called up by device type or screen size. You will need to develop this on your own. You can always us the built in navigation options and then alter the styling to meet your needs, this may be better overall for functionality.

Your navigation bar may work better if you change several area widths from a fixed pixel size to a percentage as well.

-Scott

ko04 · September 5, 2013

Scott,
Thanks for the suggestions. I am curious to try the the percentage instead of a fixed pixel though I am not sure what code like that looks like since my coding skills is very limited. Would you or anyone else be willing to show me what something like that would look like. Incase you need it this is what my coding looks like right now

/* Pure CSS3 Multi Level Drop Down Navigation Menu */
#cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}

#cssmenu {
  height: 49px;
  margin: 0px auto 75px;
  width: 720px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background: url(data:image/png;
  base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  border-bottom: 2px solid #0fa1e0;
}

#cssmenu:after, #cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}

#cssmenu a {
  background: #141414;
  background: url(data:image/png;
  base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}

#cssmenu ul {
  list-style: none;
}

#cssmenu > ul {
  float: left;
}

#cssmenu > ul > li {
  float: left;
}

#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #0fa1e0;
  margin-left: -10px;
}

#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}

#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}

#cssmenu > ul > li.active a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: url(data:image/png;
  base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}

#cssmenu > ul > li:hover > a {
  background: #070707;
  background: url(data:image/png;
  base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}

#cssmenu .has-sub {
  z-index: 1;
}

#cssmenu .has-sub:hover > ul {
  display: block;
}

#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}

#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}

#cssmenu .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}

#cssmenu .has-sub ul li:hover a {
  background: #0c7fb0;
}

#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}

#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}

#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}

#cssmenu .has-sub .has-sub ul li a:hover {
  background: #095c80;
}

The main part in question for the percentage change would be here

#cssmenu {
  height: 49px;
  margin: 0px auto 75px;
  width: 720px;

. Lastly the reason I don't want to use SM's navbar is because if I decide to switch back to having my blog intergraded I can't seem to figure out what code I use when using the SM's navbar in my blogger templet. As of right now I have a feed block but I might be changing that. When using a custom navbar its a lot easier to add in my blogger templet. Anyways thanks a lot Scott for your suggestions it is very much appreciated.

leftquark · September 5, 2013

ko04 wrote: »

Hey everyone,
Another question I would have is that if its possible to have two different navbars one that is custom like mine and one that is more iphone/mobile phone friendly. I hope I am explaining this well enough and if anyone has any thoughts on this I'd greatly appreciate it. My website is www.k-ophotography.com. Thanks in advance!

KO

I do exactly this on my site. On my iPhone a mobile-friendly page is automatically loaded by SmugMug. But on the iPad, when held vertically (portrait orientation) my menu bar, thumbnails, and photo (SmugMug Layout) don't fit. Using CSS and a 2nd content block I hide the left (vertical) navbar and show a header (horizontal) navbar. Here's what I did.

I have 2 navbars ... one is in the HEADER of the page (a horizontal one) and one is in the LEFT SIDEBAR of the page. They are both enabled in "ENTIRE SITE". My "left sidebar" has a LOGO, a MENU BLOCK, and SOCIAL ICONS. My "header navbar" has a LOGO and a MENU BLOCK.

I then use CSS to determine the screen width and hide one of them. Here's the code:

/* ====================
   = LARGE DISPLAYS   =
   ====================
   SmartPhones display a special page but tablets do not. 
   For small screens and tablets in vertical orientation, 
   show a horizontal menubar in the header. 
   Hide the header for screens that are large enough */
@media only screen and (min-width: 801px) {
  /* Hide the header nav bar for screens that are wide enough */
  .sm-page-layout-region-header { display: none; }
}

/* =============================
   = iPads and Small Monitors  =
   =============================
@media only screen and (min-width: 641px) and (max-width: 800px) {
   /* Hide the left nav bar for screens that aren't large enough */
  .sm-page-layout-region-left { display: none; } 

   /* Move the center of the page to the left edge of the screen since the left
       navbar is no longer there */
  .sm-page-layout-region .sm-page-layout-region-center { margin-left: 0px !important; }
} 

/* ==================
   = Mobile Phones  =
   ==================
@media only screen and (max-width: 640px) {
  /* Hide the header from Mobile Phones */
  .sm-page-layout-region-header .sm-page-widget-logo,
  .sm-page-layout-region-top .sm-page-widget-nav { display: none !important; }
}

ko04 · September 24, 2013

leftquark wrote: »
I do exactly this on my site. On my iPhone a mobile-friendly page is automatically loaded by SmugMug. But on the iPad, when held vertically (portrait orientation) my menu bar, thumbnails, and photo (SmugMug Layout) don't fit. Using CSS and a 2nd content block I hide the left (vertical) navbar and show a header (horizontal) navbar. Here's what I did.

I have 2 navbars ... one is in the HEADER of the page (a horizontal one) and one is in the LEFT SIDEBAR of the page. They are both enabled in "ENTIRE SITE". My "left sidebar" has a LOGO, a MENU BLOCK, and SOCIAL ICONS. My "header navbar" has a LOGO and a MENU BLOCK.

I then use CSS to determine the screen width and hide one of them. Here's the code:
/* ====================
   = LARGE DISPLAYS   =
   ====================
   SmartPhones display a special page but tablets do not. 
   For small screens and tablets in vertical orientation, 
   show a horizontal menubar in the header. 
   Hide the header for screens that are large enough */
@media only screen and (min-width: 801px) {
  /* Hide the header nav bar for screens that are wide enough */
  .sm-page-layout-region-header { display: none; }
}

/* =============================
   = iPads and Small Monitors  =
   =============================
@media only screen and (min-width: 641px) and (max-width: 800px) {
   /* Hide the left nav bar for screens that aren't large enough */
  .sm-page-layout-region-left { display: none; } 

   /* Move the center of the page to the left edge of the screen since the left
       navbar is no longer there */
  .sm-page-layout-region .sm-page-layout-region-center { margin-left: 0px !important; }
} 

/* ==================
   = Mobile Phones  =
   ==================
@media only screen and (max-width: 640px) {
  /* Hide the header from Mobile Phones */
  .sm-page-layout-region-header .sm-page-widget-logo,
  .sm-page-layout-region-top .sm-page-widget-nav { display: none !important; }
}

Thanks for the help on this leftquark what you are suggesting is exactly what I want to do but from the sounds of it your are using smugmugs navbar blocks. I am using custom css for my navbar so my question to you or anyone else that could help me with this is what then would I use for the ID on large screens for my navbar. I am going to use a smugmug navbar block for the vertical display for mobile and smaller screens, so I should be good on that end I just need an ID for my custom navbar. Any suggestions on this would be greatly appreciated!

leftquark · September 24, 2013

ko04 wrote: »

Thanks for the help on this leftquark what you are suggesting is exactly what I want to do but from the sounds of it your are using smugmugs navbar blocks. I am using custom css for my navbar so my question to you or anyone else that could help me with this is what then would I use for the ID on large screens for my navbar. I am going to use a smugmug navbar block for the vertical display for mobile and smaller screens, so I should be good on that end I just need an ID for my custom navbar. Any suggestions on this would be greatly appreciated!

It looks like you have added an HTML/CSS block to your page to do your custom navbar?

The HTML starts with some code like this ... right?

<div id="cssmenu">

It makes things easier if you also have class names associated with div's and not just ID's. You reference CLASS names with a "." before the class name (i.e. .cssmenu) and you reference ID's with a "#" sign (i.e. #cssmenu).

I would suggest changing your HTML for this by adding: class="cssmenu" as follows:

<div id="cssmenu" class="cssmenu">

For small screens you would want to hide this and for large screens you would want to hide the smugmug navbar

/* Hide the custom navbar for small screens */
@media only screen and (max-width: 640px) {
  .cssmenu { display: none !important; }
}

/* Hide the SmugMug nav bar for screens that are wide enough */
@media only screen and (min-width: 641px) {
  .sm-page-layout-region-header { display: none; }
}

Note, you may need to change ".sm-page-layout-region-header" to something else. In my case I am hiding my ENTIRE header. In your case, I think you actually use the header so you'll need a css class slightly more specific. Make sense?

ko04 · September 24, 2013

leftquark wrote: »
I do exactly this on my site. On my iPhone a mobile-friendly page is automatically loaded by SmugMug. But on the iPad, when held vertically (portrait orientation) my menu bar, thumbnails, and photo (SmugMug Layout) don't fit. Using CSS and a 2nd content block I hide the left (vertical) navbar and show a header (horizontal) navbar. Here's what I did.

I have 2 navbars ... one is in the HEADER of the page (a horizontal one) and one is in the LEFT SIDEBAR of the page. They are both enabled in "ENTIRE SITE". My "left sidebar" has a LOGO, a MENU BLOCK, and SOCIAL ICONS. My "header navbar" has a LOGO and a MENU BLOCK.

I then use CSS to determine the screen width and hide one of them. Here's the code:
/* ====================
   = LARGE DISPLAYS   =
   ====================
   SmartPhones display a special page but tablets do not. 
   For small screens and tablets in vertical orientation, 
   show a horizontal menubar in the header. 
   Hide the header for screens that are large enough */
@media only screen and (min-width: 801px) {
  /* Hide the header nav bar for screens that are wide enough */
  .sm-page-layout-region-header { display: none; }
}

/* =============================
   = iPads and Small Monitors  =
   =============================
@media only screen and (min-width: 641px) and (max-width: 800px) {
   /* Hide the left nav bar for screens that aren't large enough */
  .sm-page-layout-region-left { display: none; } 

   /* Move the center of the page to the left edge of the screen since the left
       navbar is no longer there */
  .sm-page-layout-region .sm-page-layout-region-center { margin-left: 0px !important; }
} 

/* ==================
   = Mobile Phones  =
   ==================
@media only screen and (max-width: 640px) {
  /* Hide the header from Mobile Phones */
  .sm-page-layout-region-header .sm-page-widget-logo,
  .sm-page-layout-region-top .sm-page-widget-nav { display: none !important; }
}

leftquark wrote: »
It looks like you have added an HTML/CSS block to your page to do your custom navbar?

The HTML starts with some code like this ... right?
<div id="cssmenu">
It makes things easier if you also have class names associated with div's and not just ID's. You reference CLASS names with a "." before the class name (i.e. .cssmenu) and you reference ID's with a "#" sign (i.e. #cssmenu).

I would suggest changing your HTML for this by adding: class="cssmenu" as follows:
<div id="cssmenu" class="cssmenu">
For small screens you would want to hide this and for large screens you would want to hide the smugmug navbar
/* Hide the custom navbar for small screens */
@media only screen and (max-width: 640px) {
  .cssmenu { display: none !important; }
}

/* Hide the SmugMug nav bar for screens that are wide enough */
@media only screen and (min-width: 641px) {
  .sm-page-layout-region-header { display: none; }
}
Note, you may need to change ".sm-page-layout-region-header" to something else. In my case I am hiding my ENTIRE header. In your case, I think you actually use the header so you'll need a css class slightly more specific. Make sense?

First off I want to thank you for such a quick response and your wiliness to help me with this is all much appreciated! So I was right with you until the end where you said this

Note, you may need to change ".sm-page-layout-region-header" to something else. In my case I am hiding my ENTIRE header. In your case, I think you actually use the header so you'll need a css class slightly more specific. Make sense?

. If you don't mind explaining that a little that would be great.

I probably won't work on this right away but if I have any questions I will post back. So keep a look out for any questions. Since I am very much a beginner when it comes to coding and such chances are I will have a question haha. Thanks again!

leftquark · September 24, 2013

ko04 wrote: »

First off I want to thank you for such a quick response and your wiliness to help me with this is all much appreciated! So I was right with you until the end where you said this . If you don't mind explaining that a little that would be great.

SmugMug breaks the site top-down first: header, body, footer.
- Most likely you've placed your custom navbar in the "header".
- The "body" is broken into left, right, and center. The left and right can house a "sidebar", although it looks like yours are set to OFF. The "center" is where all of your images are displayed.

Every section, and all the little pieces inside the site are given "divisions" or (< DIV >) code. Each one has a class name "class=WHATEVER". You can reference these classes with CSS and customize each of them.

Divisions build off each other. So if you have your custom navbar inside your "header" section you can reference the navbar by itself or you can reference it as part of being in the header. What this mean is, you could call out in your CSS:
.cssmenu { someOptions; }
(any instance of "cssmenu")

or you could call it out as part of it being in the header ... in CSS it builds upon itself when seperated by a space ... so something like:
.headerDiv .cssmenu {someOptions; }

If you had 2 cssmenus, for example, 1 in the "header" and one in the "body" you could target a specific one.

.bodyDiv .cssmenu { someOptions; }
or
.headerDiv .cssmenu {someOptions; }

Or you could target both:
.cssmenu { someOptions; }

With me so far?

For my website I don't use the "header" at all ... except to put my temporary navbar. It has a LOGO content block and a MENU content block in it. The rest of my site has a LEFT sidebar that has my LOGO and a different MENU block.

For all pages except vertical iPads I wanted to hide the logo and the menu that was in the header. I would have had to write 2 seperate lines of code: one to hide the logo in the "header" and one to hide the menu in the "header" ... but I realized I could hide the entire "header" and accomplish this with one line of code:

  /* Hide the header nav bar for screens that are wide enough */
  .sm-page-layout-region-header { display: none; }
}

By calling out the name "sm-page-layout-region-header" I'm calling out the entire "header" and EVERYTHING that's in it. It's now hidden.

You use the header so this is could to be a bad piece of code for you.

You'll need to Inspect your page's code and drill down deeper. Look at the divisions within your header and find the division where the SmugMug menubar is. If it's a horizontal menubar you'll see some code that might say:

<div class="sm-page-widget-nav-popover [COLOR="Red"][B]sm-page-widget-nav-horizontal[/B][/COLOR] sm-page-widget-nav-color-default sm-page-widget-nav-l sm-page-widget-nav-right sm-page-widget-nav-toplinks-regular sm-page-widget-nav-sublinks-regular sm-page-widget-nav-sublinks-separator sm-page-widget-nav-collapsible">

That's giving that section of code a LOT of CSS definitions with it. I've bolded a really important one. That "sm-page-widget-nav-horizontal" is the horizonal navbar that smugmug places (I looked at someone elses page that uses a horizontal navbar). That's the name of the division you want to hide.

It looks like if you place a vertical navbar it'll be called "sm-page-widget-nav-vertical".

So you'll need to change the above code to read something more like:

  /* Hide the header nav bar for screens that are wide enough */
  .sm-page-layout-region-header [COLOR="Red"][B].sm-page-widget-nav-horizontal[/B][/COLOR] { display: none; }
}

Follow?

ko04 · September 25, 2013

Wow what a great explanation of everything. I mean its still a little over my head but at least I am sort of getting it now so with all this info I'm going to try to make this thing work, wish me luck. I may not post back for awhile with any questions or anything I have problems with so keep on the look out if you don't mind to keep helping me. Thanks again for everything.

ko04 · October 2, 2013

leftquark wrote: »
It looks like you have added an HTML/CSS block to your page to do your custom navbar?

The HTML starts with some code like this ... right?
<div id="cssmenu">
It makes things easier if you also have class names associated with div's and not just ID's. You reference CLASS names with a "." before the class name (i.e. .cssmenu) and you reference ID's with a "#" sign (i.e. #cssmenu).

I would suggest changing your HTML for this by adding: class="cssmenu" as follows:
<div id="cssmenu" class="cssmenu">
For small screens you would want to hide this and for large screens you would want to hide the smugmug navbar
/* Hide the custom navbar for small screens */
@media only screen and (max-width: 640px) {
  .cssmenu { display: none !important; }
}

/* Hide the SmugMug nav bar for screens that are wide enough */
@media only screen and (min-width: 641px) {
  .sm-page-layout-region-header { display: none; }
}
Note, you may need to change ".sm-page-layout-region-header" to something else. In my case I am hiding my ENTIRE header. In your case, I think you actually use the header so you'll need a css class slightly more specific. Make sense?

I feel like I am getting so close here but yet so far! I was able to hide the navbar I am going to use for my mobile on larger screens but on my iphone my navbar "cssmenu" that I use for larger screens is still showing up. If you could look at my code and see what I am doing wrong I have tried doing all sorts of combo's that I think my navbar id/classes are but none of them are working. Here is my code:

/* ====================
   = LARGE DISPLAYS   =
   ====================
   SmartPhones display a special page but tablets do not. 
   For small screens and tablets in vertical orientation, 
   show a horizontal menubar in the header. 
   Hide the header for screens that are large enough */
@media only screen and (min-width: 801px) {
  /* Hide the header nav bar for screens that are wide enough */
  .sm-page-layout-region-header  .sm-page-widget-nav-left { display: none; }
}

/* =============================
   = iPads and Small Monitors  =
   =============================
@media only screen and (min-width: 641px) and (max-width: 800px) {
   /* Hide the header nav bar for screens that are wide enough
*/
 .sm-page-widget sm-page-widget-html sm-page-widget-2580150 .cssmenu
 { display: none; } 

   /* Move the center of the page to the left edge of the screen since the left
       navbar is no longer there */
  .sm-page-layout-region .sm-page-layout-region-center { margin-left: 0px !important; }
} 

/* ==================
   = Mobile Phones  =
   ==================
@media only screen and (max-width: 640px) {
  /* Hide the header from Mobile Phones */
  .sm-page-widget sm-page-widget-html sm-page-widget-2580150 .myHeader,
.sm-page-widget.sm-page-widget-2580150 .cssmenu { display: none !important; } }

Thanks in advance!

leftquark · October 2, 2013

ko04 wrote: »

I feel like I am getting so close here but yet so far! I was able to hide the navbar I am going to use for my mobile on larger screens but on my iphone my navbar "cssmenu" that I use for larger screens is still showing up. If you could look at my code and see what I am doing wrong I have tried doing all sorts of combo's that I think my navbar id/classes are but none of them are working. Here is my code:

You don't use the CSS menu and "myHeader" anywhere except in the one spot that you're trying to hide, so don't make it so complicated. Stick to the simple names of just "cssmenu" and "myHeader".

@media only screen and (max-width: 640px) {
  /* Hide the header from Mobile Phones */
  .myHeader, .cssmenu { display: none !important; } 
}

When you put all the other .sm-page-widget ... blah blah blah, it starts making it way more restrictive and you can end up blocking what you're trying to do.

ko04 · October 3, 2013

leftquark wrote: »
It looks like you have added an HTML/CSS block to your page to do your custom navbar?

The HTML starts with some code like this ... right?
<div id="cssmenu">
It makes things easier if you also have class names associated with div's and not just ID's. You reference CLASS names with a "." before the class name (i.e. .cssmenu) and you reference ID's with a "#" sign (i.e. #cssmenu).

I would suggest changing your HTML for this by adding: class="cssmenu" as follows:
<div id="cssmenu" class="cssmenu">
For small screens you would want to hide this and for large screens you would want to hide the smugmug navbar
/* Hide the custom navbar for small screens */
@media only screen and (max-width: 640px) {
  .cssmenu { display: none !important; }
}

/* Hide the SmugMug nav bar for screens that are wide enough */
@media only screen and (min-width: 641px) {
  .sm-page-layout-region-header { display: none; }
}
Note, you may need to change ".sm-page-layout-region-header" to something else. In my case I am hiding my ENTIRE header. In your case, I think you actually use the header so you'll need a css class slightly more specific. Make sense?

leftquark wrote: »
You don't use the CSS menu and "myHeader" anywhere except in the one spot that you're trying to hide, so don't make it so complicated. Stick to the simple names of just "cssmenu" and "myHeader".
@media only screen and (max-width: 640px) {
  /* Hide the header from Mobile Phones */
  .myHeader, .cssmenu { display: none !important; } 
}
When you put all the other .sm-page-widget ... blah blah blah, it starts making it way more restrictive and you can end up blocking what you're trying to do.

I am not getting why this isn't working I have tried simplifying everything that didn't work tried making it more specific that didn't work. I don't know if my ID/Classes are wrong or what. I tried all different types of classes that I saw through out the code none of them seemed to be the one that made things right. So currently this is how things stand the navbar I want to use for my mobile site doesn't show up on large screens. The navbar I want to use for my large screens shows up on mobile sites. Then the navbar for my mobile site doesn't show up on the mobile. Currently this is what my code looks like.

/* ====================
   = LARGE DISPLAYS   =
   ====================
   SmartPhones display a special page but tablets do not. 
   For small screens and tablets in vertical orientation, 
   show a horizontal menubar in the header. 
   Hide the header for screens that are large enough */
@media only screen and (min-width: 801px) {
  /* Hide the header nav bar for screens that are wide enough */
 .sm-page-widget .sm-page-widget-nav-left { display: none; }
}

/* =============================
   = iPads and Small Monitors  =
   =============================
@media only screen and (min-width: 641px) and (max-width: 800px) {
   /* Hide the left nav bar for screens that aren't large enough */
.sm-page-widget .sm-page-widget-nav-left { display: none; }  
}

/* ==================
   = Mobile Phones  =
   ==================
@media only screen and (max-width: 640px) {
  /* Hide the header from Mobile Phones */
  .sm-page-widget .cssmenu,
.sm-page-widget .myHeader { display: none !important; } 
}

This is kind of over my head and I'm taking on something larger then what I can understand but I am up for the challenge its just stumping me like crazy. Let me know your thoughts.

leftquark · October 3, 2013

ko04 wrote: »
I am not getting why this isn't working I have tried simplifying everything that didn't work tried making it more specific that didn't work. I don't know if my ID/Classes are wrong or what. I tried all different types of classes that I saw through out the code none of them seemed to be the one that made things right. So currently this is how things stand the navbar I want to use for my mobile site doesn't show up on large screens. The navbar I want to use for my large screens shows up on mobile sites. Then the navbar for my mobile site doesn't show up on the mobile. Currently this is what my code looks like.
/* ====================
   = LARGE DISPLAYS   =
   ====================
   SmartPhones display a special page but tablets do not. 
   For small screens and tablets in vertical orientation, 
   show a horizontal menubar in the header. 
   Hide the header for screens that are large enough */
@media only screen and (min-width: 801px) {
  /* Hide the header nav bar for screens that are wide enough */
 .sm-page-widget .sm-page-widget-nav-left { display: none; }
}

/* =============================
   = iPads and Small Monitors  =
   =============================
@media only screen and (min-width: 641px) and (max-width: 800px) {
   /* Hide the left nav bar for screens that aren't large enough */
.sm-page-widget .sm-page-widget-nav-left { display: none; }  
}

/* ==================
   = Mobile Phones  =
   ==================
@media only screen and (max-width: 640px) {
  /* Hide the header from Mobile Phones */
  .sm-page-widget .cssmenu,
.sm-page-widget .myHeader { display: none !important; } 
}
This is kind of over my head and I'm taking on something larger then what I can understand but I am up for the challenge its just stumping me like crazy. Let me know your thoughts.

What kind of navbar did you insert for mobile devices? Did you add it into a left sidebar? I don't remember your site having a left sidebar? Did you put the (mobile version) of the navbar in the header? If so, I'm surprised any of that code works ... Notice how you're calling out "nav-left" instead of a nav-header?

Your code for large displays and ipads/small monitors is redundant -- it's exactly the same. No need to break it into 2 chunks. In the "large displays" section just change that "801px" to "641px" and you're covered. Then delete the ipads/small monitors section.

I'm not sure why your code to remove the .cssmenu and .myHeader aren't working. I tested the code I gave you on your site and it worked perfectly (although I didn't have .sm-page-widget in it). Where are you putting the code? Into your theme's advanced CSS section? or in a CSS block?

ko04 · October 4, 2013

leftquark wrote: »

What kind of navbar did you insert for mobile devices? Did you add it into a left sidebar? I don't remember your site having a left sidebar? Did you put the (mobile version) of the navbar in the header? If so, I'm surprised any of that code works ... Notice how you're calling out "nav-left" instead of a nav-header?

Your code for large displays and ipads/small monitors is redundant -- it's exactly the same. No need to break it into 2 chunks. In the "large displays" section just change that "801px" to "641px" and you're covered. Then delete the ipads/small monitors section.

I'm not sure why your code to remove the .cssmenu and .myHeader aren't working. I tested the code I gave you on your site and it worked perfectly (although I didn't have .sm-page-widget in it). Where are you putting the code? Into your theme's advanced CSS section? or in a CSS block?

So I got things working where it hides the mobile navbar just fine on large screens the trouble is still isn't working for the hiding of my large navbar. When I add this code

/* 
/* ==================
   = Mobile Phones  =
   ==================
@media only screen and (max-width: 640px) {
  /* Hide the header from Mobile Phones */
.myHeader,
.cssmenu { display: none !important; }

everything goes away on the large screen but the mobile version works. So that makes me wonder if there is something wrong with that code. I too tried a "display: none" on my header and cssmenu but when I inspect it thats where I see the code

.sm-page-widget. .cssmenu

and

.sm-page-widget .myHeader

. When I display none on both those using google chrome's web designer tools it works just fine.

I currently only have this as my code

/* ====================
   = LARGE DISPLAYS   =
   ====================
   SmartPhones display a special page but tablets do not. 
   For small screens and tablets in vertical orientation, 
   show a horizontal menubar in the header. 
   Hide the header for screens that are large enough */
@media only screen and (min-width: 641px) {
  /* Hide the header nav bar for screens that are wide enough */
 .sm-page-widget-nav { display: none; }
}

and as I said its hiding the mobile navbar just fine

This is the whole code together that I am trying to use but doesn't work

/* ====================
   = LARGE DISPLAYS   =
   ====================
   SmartPhones display a special page but tablets do not. 
   For small screens and tablets in vertical orientation, 
   show a horizontal menubar in the header. 
   Hide the header for screens that are large enough */
@media only screen and (min-width: 641px) {
  /* Hide the header nav bar for screens that are wide enough */
 .sm-page-widget-nav { display: none; }
}


/* ==================
   = Mobile Phones  =
   ==================
@media only screen and (max-width: 640px) {
  /* Hide the header from Mobile Phones */
.sm-page-widget .myHeader,
.sm-page-widget .cssmenu { display: none !important; }

Any thoughts? I really appericate all your time on this and if this is troubling you to much then don't worry about it. Its probably on my end and not really understanding code very well.

leftquark · October 4, 2013

ko04 wrote: »

So I got things working where it hides the mobile navbar just fine on large screens the trouble is still isn't working for the hiding of my large navbar. When I add this code

Any thoughts? I really appericate all your time on this and if this is troubling you to much then don't worry about it. Its probably on my end and not really understanding code very well.

Yes, and it's a teeny little mistake. In the very end of your "for mobile screens" section, you're missing the final "}" to close out the statement:

/* ==================
   = Mobile Phones  =
   ==================
@media only screen and (max-width: 640px) {
  /* Hide the header from Mobile Phones */
  .myHeader, .cssmenu { display: none !important; }
[COLOR="Red"]}[/COLOR]

ko04 · October 4, 2013

leftquark wrote: »

What kind of navbar did you insert for mobile devices? Did you add it into a left sidebar? I don't remember your site having a left sidebar? Did you put the (mobile version) of the navbar in the header? If so, I'm surprised any of that code works ... Notice how you're calling out "nav-left" instead of a nav-header?

Your code for large displays and ipads/small monitors is redundant -- it's exactly the same. No need to break it into 2 chunks. In the "large displays" section just change that "801px" to "641px" and you're covered. Then delete the ipads/small monitors section.

I'm not sure why your code to remove the .cssmenu and .myHeader aren't working. I tested the code I gave you on your site and it worked perfectly (although I didn't have .sm-page-widget in it). Where are you putting the code? Into your theme's advanced CSS section? or in a CSS block?

leftquark wrote: »
Yes, and it's a teeny little mistake. In the very end of your "for mobile screens" section, you're missing the final "}" to close out the statement:
/* ==================
   = Mobile Phones  =
   ==================
@media only screen and (max-width: 640px) {
  /* Hide the header from Mobile Phones */
  .myHeader, .cssmenu { display: none !important; }
[COLOR="Red"]}[/COLOR]

Its still hiding the whole large navbar all together on large sizes and on mobile even with that change.

leftquark · October 4, 2013

ko04 wrote: »

Its still hiding the whole large navbar all together on large sizes and on mobile even with that change.

I searched through the code on your site and I don't see the CSS to hide the menu bars anywhere. Where are you putting the CSS?

Allen · October 4, 2013

How about closing the open comment tag?

leftquark · October 4, 2013

Allen wrote: »

How about closing the open comment tag?

AHAHAHA. Now *that's* why I don't see the code showing up AT ALL ... and why it's not working

/* ==================
   = Mobile Phones  =
   ================== [COLOR="Red"]*/
[/COLOR]@media only screen and (max-width: 640px) {
  /* Hide the header from Mobile Phones */
  .myHeader, .cssmenu { display: none !important; }
[COLOR="red"]}[/COLOR]

ko04 · October 4, 2013

leftquark wrote: »
AHAHAHA. Now *that's* why I don't see the code showing up AT ALL ... and why it's not working
/* ==================
   = Mobile Phones  =
   ================== [COLOR="Red"]*/
[/COLOR]@media only screen and (max-width: 640px) {
  /* Hide the header from Mobile Phones */
  .myHeader, .cssmenu { display: none !important; }
[COLOR="red"]}[/COLOR]

Victory! That was it the "/" is what was wrong. Now I need to make up a logo for my mobile site and I'll be good to go! Thanks for everything and thank you Allen as well!

tobeme · October 19, 2013

It's cool to hide the expandable menu bar on mobile. I'm using the smugmug standard horizontal navbar. Since I have very limited knowledge with CSS, appreciate should someone show me the code to hide the menu bar on iPhone (yet expandable when click on the "menu" on the top).

denisegoldberg · October 19, 2013

tobeme wrote: »

It's cool to hide the expandable menu bar on mobile. I'm using the smugmug standard horizontal navbar. Since I have very limited knowledge with CSS, appreciate should someone show me the code to hide the menu bar on iPhone (yet expandable when click on the "menu" on the top).

If you're using the standard smug menu you don't need to write code. Click the wrench on your menu element, scroll to the bottom of the Basic tab and set Collapse for mobile to on.

--- Denise

tobeme · October 19, 2013

Wow. Thank you!

Custom Navbar to long for iphone

Comments