move upper menu

baertigerbackpacker · Member · Jan 5, 2017 at 10:08 am
Copy link

Add topic to favorites
1.I trying to move the upper menu to the right on my site but it doesn’t work. I don’t now how I can do that
2. I also trying to change the color of this, but when I change the color. some other sentence also change the color with that here

.menu, h2.description
{
color: blue;
}

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 5, 2017 at 9:09 pm
Copy link
For the menu color, use the following to change it to blue.
```
.menu a {
	color: blue;
}
```
I see you have gotten the color of the title and tagline changed already.
baertigerbackpacker · Member · Jan 5, 2017 at 11:02 pm
Copy link
yah but that does not work
baertigerbackpacker · Member · Jan 5, 2017 at 11:43 pm
Copy link
the color of the menu is white not blue, I did not change it, because if I changed that color every other sentence will change her color
thesacredpath · Member · Jan 6, 2017 at 5:55 am
Copy link
This code, targets just the menu link items, nothing more. I went into your customizer, added this at the very end of your custom CSS below everything else, and the menu items at top right turned blue.
```
.menu a {
	color: blue;
}
```
Can you try it again?
baertigerbackpacker · Member · Jan 6, 2017 at 7:49 am
Copy link
it works thank you :D.
But can I move that blue menu more to the right side ?
thesacredpath · Member · Jan 6, 2017 at 8:11 pm
Copy link
If you widen and narrow your browser window, you will notice that there really isn’t much we can recover on the right side. If you narrow your window down, you will see that at about 955px in window width, the menu overlaps the site title due to its size and length. Add the following to the very end of your custom CSS and see what you think with this. It keeps the menu from overlapping the title and also adjusts the title size as the window/screen gets narrower so that your entire title shows in the screen and doesn’t get cut off.
```
.masthead .row {
	max-width: 100%;
}
@media screen and (max-width: 955px) {
	.masthead .menu {
		width: 100%;
	}
}
@media screen and (max-width: 767px) {
	h1.logo a {
		font-size: 48px;
	}
	h2.description {
		font-size: 16px;
	}
}
@media screen and (max-width: 540px) {
	h1.logo a {
		font-size: 36px;
	}
	.masthead .menu {
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (max-width: 480px) {
	.masthead {
		padding-left: 20px;
		padding-right: 20px;
	}
	h1.logo a {
		font-size: 24px;
		font-weight: 100;
	}
	h2.description {
		font-size: 14px;
	}
}
```
baertigerbackpacker · Member · Jan 7, 2017 at 10:02 am
Copy link
thx it works great
thesacredpath · Member · Jan 7, 2017 at 6:39 pm
Copy link
Awesome, and you are welcome!

No items found.