mobile navigation bar

anaviana · October 21, 2020

Hello, I just changed the background color of my navigation bar. The background is white. It is also white in the mobile screen, but I don't want it to be white. How can I do it? Anyone knows the code to make the navigation bar go to the primary color of the theme? or to hide the white background?
Thanks

Hikin' Mike · October 21, 2020

Without seeing your site, no. Please post your site here.

anaviana · October 27, 2020

Understood! I changed my mind and design something different.

But I have one more question... I posted a blog post with check marks but the check marks are way too big in the mobile screen. How can I make the check marks be smaller in the mobile screen? my site is https://www.lovelypicturestudio.com/MY-BLOG/PHOTOSHOOT-CHECKLIST Could you share the css code or implement it? :)

Let me know! Thanks

Hikin' Mike · October 27, 2020

@anaviana said:
But I have one more question... I posted a blog post with check marks but the check marks are way too big in the mobile screen. How can I make the check marks be smaller in the mobile screen? my site is https://www.lovelypicturestudio.com/MY-BLOG/PHOTOSHOOT-CHECKLIST Could you share the css code or implement it?

Let me know! Thanks

I would suggest NOT using checkmarks as a jpg. I would use a font, and SmugMug happens to have one. The big advantage is when you switch to smaller devices, it stays in put and it doesn't change size.

I would remove your current checkmarks and text. Then use ONE HTML/CSS Block. Copy the code as follows:

HTML:

<div class="checkmark">
  <p>It is best to plan outfits ahead of time. Especially for family sessions, you may find that the outfit you had in mind for your little one suddenly does not fit or has a stain that went unnoticed. The last thing you want on the day of your session is to be running to the mall to try and assemble something last minute. Avoid crazy prints and try to dress in neutrals.</p>
</div> 

<div class="checkmark">
  <p>Think about what it is specifically that you are looking for, and choose the date and time of your session accordingly. If you want nice shots of you and your family in front of the sunset, make sure not to schedule your session at noon.</p>
</div> 

<div class="checkmark">
  <p>Some kids (and some grown-ups!) are more shy than others. It’s good to use the week leading up to your session getting everyone acquainted with the idea. Whether it be telling little ones that you are “going to the park with Mommy’s friend” on Saturday or just bringing it up in conversation in general, it can help ease the shyness on the day of.</p>
</div> 

<div class="checkmark">
  <p>Footwear matters- whether it be a fall session in the woods with some autumnal foliage or in a beautiful field, you will be very upset with yourself for wearing heels or anything impractical. Thank me later!</p>
</div> 

<div class="checkmark">
  <p>Think about undergarments ahead of time. You do not want to be on your way to your session and realize you have a bright pink bra showing through your shirt! On a similar note, it is good to be aware of what is in the wash and what's clean. Digging through the laundry room on your way out the door is a bad start.</p>
</div> 

<div class="checkmark">
  <p>Make sure everyone is well fed before the shoot. Even adults sometimes have a hard time hiding it when they’re ‘hangry’.</p>
</div> 

<div class="checkmark">
  <p>Choose a location that makes sense for you. You know your family best, and location can have a big impact on the success of the session.</p>
</div> 

<div class="checkmark">
  <p>If you need your roots touched up or any family members are planning to get a haircut, it is best to do this at least a week before your session. Scheduling these appointments too close to the day of is a recipe for disaster.</p>
</div> 

<div class="checkmark">
  <p>Make sure to not have any chipped nail polish or unsightly colored nails - the little things end up being big things when you get your photos back!</p>
</div>

CSS:

.checkmark {display: flex;}

.checkmark:before {
  font-family: 'SmugMug Icon Font Regular';
  content: '\E02E';
  display: inline-block;
  color: #ff7e98;
  margin: -.2em .5em 0 0;
  font-size: 3em;
  line-height: 1;
}

It should look like this (my test page):

anaviana · October 28, 2020

I did it and it looks great!! Thanks!!

My next request... all my text is 30px between lines. How can I do the space betwen lines bigger? and I also want to make a space between paragraphs? It just looks more pleasant to the eye.

Thanks!

anaviana · October 28, 2020

and my text size is 16... something I should modify too :)

anaviana · October 28, 2020

and.. I am also curious how it would look like if I want check marks as jpg because I really like the style of the checkmarks I included in the post. Is there a way to include a css so the mobile screen resize the checkmarks? even if they are over the line... see screenshoot. I don't mind the way it looks as long as the check marks are smaller.

Thanks so much!!!

Hikin' Mike · October 28, 2020

In that case, use this:

HTML:

<div class="checklist-container">
  <div class="checkmark"><img src="https://photos.smugmug.com/My-Photos/i-Ch2CLzb/0/096037f8/Ti/check-mark%20small-Ti.png"></div>
  <div class="checklist"><p>It is best to plan outfits ahead of time. Especially for family sessions, you may find that the outfit you had in mind for your little one suddenly does not fit or has a stain that went unnoticed. The last thing you want on the day of your session is to be running to the mall to try and assemble something last minute. Avoid crazy prints and try to dress in neutrals.</p></div>
</div> 

<div class="checklist-container">
  <div class="checkmark"><img src="https://photos.smugmug.com/My-Photos/i-Ch2CLzb/0/096037f8/Ti/check-mark%20small-Ti.png"></div>
  <div class="checklist"><p>Think about what it is specifically that you are looking for, and choose the date and time of your session accordingly. If you want nice shots of you and your family in front of the sunset, make sure not to schedule your session at noon.</p></div>
</div> 

<div class="checklist-container">
  <div class="checkmark"><img src="https://photos.smugmug.com/My-Photos/i-Ch2CLzb/0/096037f8/Ti/check-mark%20small-Ti.png"></div>
  <div class="checklist"><p>Some kids (and some grown-ups!) are more shy than others. It’s good to use the week leading up to your session getting everyone acquainted with the idea. Whether it be telling little ones that you are “going to the park with Mommy’s friend” on Saturday or just bringing it up in conversation in general, it can help ease the shyness on the day of.</p></div>
</div> 

<div class="checklist-container">
  <div class="checkmark"><img src="https://photos.smugmug.com/My-Photos/i-Ch2CLzb/0/096037f8/Ti/check-mark%20small-Ti.png"></div>
  <div class="checklist"><p>Footwear matters- whether it be a fall session in the woods with some autumnal foliage or in a beautiful field, you will be very upset with yourself for wearing heels or anything impractical. Thank me later!</p></div>
</div> 

<div class="checklist-container">
  <div class="checkmark"><img src="https://photos.smugmug.com/My-Photos/i-Ch2CLzb/0/096037f8/Ti/check-mark%20small-Ti.png"></div>
  <div class="checklist"><p>Think about undergarments ahead of time. You do not want to be on your way to your session and realize you have a bright pink bra showing through your shirt! On a similar note, it is good to be aware of what is in the wash and what's clean. Digging through the laundry room on your way out the door is a bad start.</p></div>
</div> 

<div class="checklist-container">
  <div class="checkmark"><img src="https://photos.smugmug.com/My-Photos/i-Ch2CLzb/0/096037f8/Ti/check-mark%20small-Ti.png"></div>
  <div class="checklist"><p>Make sure everyone is well fed before the shoot. Even adults sometimes have a hard time hiding it when they’re ‘hangry’.</p></div>
</div> 

<div class="checklist-container">
  <div class="checkmark"><img src="https://photos.smugmug.com/My-Photos/i-Ch2CLzb/0/096037f8/Ti/check-mark%20small-Ti.png"></div>
  <div class="checklist"><p>Choose a location that makes sense for you. You know your family best, and location can have a big impact on the success of the session.</p></div>
</div> 

<div class="checklist-container">
  <div class="checkmark"><img src="https://photos.smugmug.com/My-Photos/i-Ch2CLzb/0/096037f8/Ti/check-mark%20small-Ti.png"></div>
  <div class="checklist"><p>If you need your roots touched up or any family members are planning to get a haircut, it is best to do this at least a week before your session. Scheduling these appointments too close to the day of is a recipe for disaster.</p></div>
</div> 

<div class="checklist-container">
  <div class="checkmark"><img src="https://photos.smugmug.com/My-Photos/i-Ch2CLzb/0/096037f8/Ti/check-mark%20small-Ti.png"></div>
  <div class="checklist"><p>Make sure to not have any chipped nail polish or unsightly colored nails - the little things end up being big things when you get your photos back!</p></div>
</div>

CSS:

.checklist-container {display: flex;}

.checkmark img {
  width: 36px;
  margin: 5px 20px 0 0;
}

.checklist p {
  font-size: 20px;
  line-height: 1.5;
  margin: 0 auto 2em;
}

You can adjust the paragraph margin, text size, and line-height by editing .checklist p. The margin now says top margin is 0, left/right is auto and the bottom is 2em.

Mobile will stay the same size and location.

anaviana · October 28, 2020

awesome!! I love it!!!!!

anaviana · October 28, 2020

and... another question... is it possible to include the subject: Inquiry in the contact form? I am asking because I would like to set up a filter in my gmail so when someone sends me an email and the subject is Inquiry, they will receive an auto response. Let me know! Thanks

Hikin' Mike · October 28, 2020

You can't edit the SmugMug contact form.

mobile navigation bar

Comments