change the color under the pages menu

Hi there!

You can change the color of the navigation bar using CSS. Since you’re using Jetpack, first make sure the Custom CSS module for your Jetpack plugin is activated. Then go into Appearance > Edit CSS and paste in the following:

.main-navigation {
  background-color: yellow;
}

(Change “yellow” to the color word or hex code you want to use.)

Let me know if you have any questions! ??

Thank you! If I want it to be a blush type of color or light tan how do I do that?

Also there are other things on the page that were in the original navigation bar color – how do I change them all to be the same color? Thank you!

ok I researched and figured out the hex code thing for colors. Thank you – but help on changing the other font colors would be great!

You’re welcome! You can pick out a color hex code to add there (like #ffffff = white). I like this site for browsing colors: color-hex.com.

Or there is a Chrome extension called ColorZilla that lets you select any color you see on a website and get the code for it, so that’s a good tool to use if you see a color you love on another site and want to know how to use it yourself.

Anywhere you want to change colors will need to be targeted with CSS by finding the correct selector (such as main-navigation, used in the code above) and adding the colors there. This post has some info on finding selectors within your code:
https://dailypost.wordpress.com/2013/07/25/css-selectors/.

For example, if you mean the link color, you could use the following code to change the color of all of the links on your site:

a, a:visited {
	color: #00ced1;
}

a:hover {
	color: #f7c3b6;
}

Just like before, change the color there to be one you like. ??

Thank you so much! I really appreciate your help! I was wondering if you could also tell me how to hide my site title? I’ve tried copying and pasting different things in CSS, but haven’t gotten it to work yet.

You’re welcome! ??

To hide the site title and/or description text under your logo, you can add this CSS:

.site-title {
	display: none;
}

.site-description {
	display: none;
}

Thank you so much – I just used the first one because I still want the site description and it worked!!!

Lastly, I am trying to display photos on a gallery, but I don’t see many gallery options. Do you have any recommendations for this? The first site I created (www.alisonnicolephotography.wordpress.com) had a much better way of displaying the photos and everything seemed much more used friendly when I made changes to/was setting up that site. Any advice would be appreciated!!

Great! ??

Since you’re using the Jetpack plugin, you could check out the modules in there that work on images, such as the Tiled Galleries one, and the Carousel one. Those give you some of the image functions you’re used to on WordPress.com.

Thank you – how do I look at those? I clicked on jetpack, but I’m not sure how to browse these.

If you click on Jetpack along the left in your dash, then click the button that says “See all…” you’ll see the full list. There’s a search box on the right there that I like to use to narrow down the options. If you type “image” in there, it’ll show you both of those. ??

Thank you! I activated both, but it seems like the Tiled Galleries only worked for one of my pages with a gallery… does that seem normal when you first activate it? Is there a way to apply it to all of my gallery pages?

You’re welcome! ?? You likely need to go edit pages/posts to use the new gallery module you’ve activated, since those were made before it was there.

If you have a specific example of a page where there’s a problem getting it to update (once you go in & edit), let me know!

Hi! I’m not sure how to edit the new gallery pages to add the tiled gallery tool to it. It automatically worked for two of my gallery pages, but not for the following:
https://alisonnicolephotography.com/contact/couples/
https://alisonnicolephotography.com/contact/seniors/
https://alisonnicolephotography.com/contact/personal-project-366/
Thank you!

It looks like the difference on those pages is some of the settings. On a page that works (like /families), it’s set to Tiled Gallery, while those 3 appear to be set up differently. To change it, you’ll open the editing screen for the page, click the gallery, then click the pencil icon to open up the options and play around with the settings in there.