Eliminate margin in mobile view + separate landing page without header

tkeetch

First, I just want to say thank you to everyone who has posted helps for others! By reading through past posts, I figured out how to create a hamburger menu, have a "desktop/large screen" slideshow with landscape orientated photos, and have a "mobile/small screen" slideshow with portrait orientated photos.

I just can't figure out some final tweaks.

1. On desktop view, there is not a large space between my header/logo and the homepage slideshow. But on mobile, there is a large margin there. How can I eliminate it? My homepage: https://tiffanykeetch.smugmug.com

2. I want to create a separate landing page for Instagram. I have a different logo and menu on that page, so I need to hide the site header and menu. I added some css that I found from another post, and it works when I view it on desktop, but not for mobile. What am I doing wrong? Instagram landing page: https://tiffanykeetch.smugmug.com/Insta

Hikin' Mike

This should take care of both. Add this to your Theme's Custom CSS section.

@media screen and (max-width: 736px) {

  .sm-user-ui .sm-page-widget .sm-page-widget-content {padding:0 !important;}

  .sm-page-node-SQvJww .sm-page-widget .sm-page-widget-content {padding:12px 0 !important;}

  .sm-page-node-SQvJww .sm-page-widget-24183573 {display:none !important;}

}

tkeetch

Thank you so much! I didn’t even realize there was another place for .css besides the custom .css element I could add to the Entire Site (or each page.) I compiled all the .css to that one space, and deleted all of the separate elements.

The separate landing page is now working with only 1 logo. But there is still a gap between the logo and the slideshow on the mobile homepage. I'll attach a screenshot. It seems like there is an element there (672x32) that could be removed?
To make things easier, I copied and pasted all of the current .css into a google doc, so you can see everything at a glance. Maybe there is a conflict or something? https://docs.google.com/document/d/1CSIaLCBX_V8gh3rv3_-wuxQed0ixujOfbqt7xqokrXQ/edit?usp=sharing

(

Hikin' Mike

You removed the code that would have removed the padding. You have this:

/* Hides Header on Insta Page */
@media screen and (max-width: 768px) {
  .sm-page-node-SQvJww .sm-page-widget .sm-page-widget-content {padding:0 !important;}
  .sm-page-node-SQvJww .sm-page-widget-24183573 {display:none !important;}
}

You need this instead:

@media screen and (max-width: 736px) {

  .sm-user-ui .sm-page-widget .sm-page-widget-content {padding:0 !important;}

  .sm-page-node-SQvJww .sm-page-widget .sm-page-widget-content {padding:12px 0 !important;}

  .sm-page-node-SQvJww .sm-page-widget-24183573 {display:none !important;}

}

Hikin' Mike

@tkeetch said:
To make things easier, I copied and pasted all of the current .css into a google doc, so you can see everything at a glance

No need for that. I can see (and edit it) using Firefox web tools. That's also why I asked you to add it to your theme's custom section. Easy for me (and others) to see and edit.

tkeetch

Oops! I must have accidentally deleted that line when I added the "Hides Header on Insta". Thank you! Margin fixed!

So... I clicked on your siggy link "My SmugMug Customizations" and there are so many cool things in there! I found the "Off Canvas Navigation Menu" and I love how it works so much more than how the regular hamburger/menu was working for mobile.

I want that to only show up on mobile, and to have the regular horizontal menu links on larger screens.

For now, I added the html only to my separate landing page while I am figuring out how it all works. (http://tiffanykeetch.smugmug.com/insta) But after that I'd like to add it to both the entire site menu and my separate homepage menu.

I messed a bit with the code - I changed the colors, the size of the fonticon, and I moved the @ media code so it would surround all the code. (I'm sure there are some lines that can be deleted that refer only to larger screens, but I wasn't sure which ones and I didn't want to delete anything I wasn't supposed to.)

1- Is this possible?
2- How can I get it to be hidden on larger screens?
3- How can I move the hamburger icon up to the right corner of the screen?
4- How can I change the hamburger icon color to #99cccc?

5- Maybe I'm making all of this too complicated - I feel like I have too many menus. On the entire site I have all the regular page links, plus I want a link for "Home." On the homepage, I just want the "Home" to be hidden, so I created a whole separate menu. And on the Instagram landing page, I want the "Home" to say "Website" instead. Is there an easier way to accomplish this rather then having 3 separate menus (plus separate ones for mobile?)

Thank you SO much for your help!! I feel like I should compensate you for your time!

Hikin' Mike

Glad you found (and liked) the other custom stuff. > @tkeetch said:

1- Is this possible?

Possible what?

2- How can I get it to be hidden on larger screens?

Not sure what menu your talking about, but generally if you want to hide something on larger monitors:

@media screen and (min-width: 737px) {

    /* stuff here */

}

Conversely, if you want to hide smaller monitors:

@media screen and (max-width: 736px) {

    /* stuff here */

}

Hikin' Mike

@tkeetch said:
3- How can I move the hamburger icon up to the right corner of the screen?

Move the HTML/CSS block that contains that menu ABOVE your Instagram Logo.

Then click on the "triangle" for your Instagram Logo. Edit the top margin to a negative number to pull the logo up. Also, change the width from 100% to 50%. Save. That should do it.

4- How can I change the hamburger icon color to #99cccc?

You missed the # before the 99cccc. This is what you have now:

.sm-fonticon-Menu::before {
  font-size: 36px;
  color: 99cccc;
}

You need this:

.sm-fonticon-Menu::before {
  font-size: 36px;
  color: #99cccc;
}

Hikin' Mike

@tkeetch said:
5- Maybe I'm making all of this too complicated - I feel like I have too many menus. On the entire site I have all the regular page links, plus I want a link for "Home." On the homepage, I just want the "Home" to be hidden, so I created a whole separate menu. And on the Instagram landing page, I want the "Home" to say "Website" instead. Is there an easier way to accomplish this rather then having 3 separate menus (plus separate ones for mobile?)

I think you are. I don't understand the need for a separate Instagram landing page. What does it do?

tkeetch

Ok. Thanks!

I agree. Everything was too complicated. I deleted all of the menus but two. I have the Smugmug Nav Menu on the Entire Site for large screens, as well as an HTML Off Canvas Navigation Menu for mobile screens.

5. An instagram landing page is for adding direct links to blog posts, or items for sale that I mention on my instagram account - so visitors don't have to spend time searching my site for them. When I post something about a blog post, I can just caption it with "Click the link in my bio!" and there is the direct link waiting for them. I was thinking I didn't want it to seem like they were on my website until they clicked on a link... but that was silly, and so I am fine with all the headers, footers, etc. being the same as the entire site.

Here is where I'm stuck now...
6. In desktop view - the Off Canvas Navigation Hamburger Menu shows in the top right of the screen. How can I hide this?

7. In mobile view - how can I better line up the logo and the hamburger menu icon? The closer to the top, the better. I adjusted them so they look great in desktop, so I don't know how to move them for mobile without messing up the desktop view.

THANK YOU so much for your help!!

Hikin' Mike

This should take care of both:

@media screen and (min-width: 737px) {

  .container {display: none;}
  .sm-user-ui .sm-page-widget-24183574 .sm-page-widget-content,
  .sm-user-ui .sm-page-widget-24183573 .sm-page-widget-content {margin-top: 0;}

}

@media screen and (max-width: 736px) {

  .sm-user-ui .sm-page-widget-24183573 .sm-page-widget-content {margin-top: -70px !important;}

}

tkeetch

Thank you!!