Responsive View/Header Titles

nagpalreema09 · Member · Feb 4, 2015 at 4:04 pm
Copy link

Add topic to favorites
Hello, I have two questions and was told to reach out to WordPress CSS support:

1) I’m having some trouble making my main nav responsive in tablet and mobile views
2) I have some bright images and it’s drowning out the header titles a little bit. Is there a way to manipulate this?

The blog I need help with is: (visible only to logged in users)
staff-happychia · Staff · Feb 5, 2015 at 9:19 am
Copy link
1) I responded to you regarding this one in your recent thread :-)

2) Could you elaborate this a bit? Sorry, I did not understand what do you need.
nagpalreema09 · Member · Feb 5, 2015 at 4:32 pm
Copy link
Hi! Sorry, I forget to receive notifications for when you replied.

Regarding your first post, which code in my custom CSS does this one replace?

Your answer was: You have this style that is not wrapped in the media query that is messing up the menu bar on tablet/mobile views.

#site-navigation {
width: 650px;
}
I did not understand what is this rule for. So please either let it go or wrap it in the appropriate media query.

2) Are you able to access my site? What is your opinion of the header titles? Would you say they are easy to read on all pages? If so, then I don’t need to change this. If some are hard to read, I wanted to know if there was a CSS to darken them.
staff-happychia · Staff · Feb 6, 2015 at 2:38 am
Copy link
Your menu is not good on mobile. It is pushed to the right so we need to scroll to the right to access Menu icon with three lines. To correct this remove this style at the top of your custom CSS:
```
#site-navigation {
    width: 650px
}
```
Also your menu items are small in size. To change them back to their default size, remove:

`#menu-primary-menu li a {
font-size: .65em
}`

Except these two problems, your site looks great :-)
nagpalreema09 · Member · Feb 6, 2015 at 2:18 pm
Copy link
I will go ahead and change that.

For the main nav menu size, the titles are small because I wanted to make sure the full menu fit on one line. When I originally had it this size, the menu was two lines.

But thanks!
nagpalreema09 · Member · Feb 6, 2015 at 3:04 pm
Copy link
You don’t feel like the header titles get drowned out at all? Specifically, on these two pages?

https://nrengineering.wordpress.com/5-0-awards/

Our Team
staff-happychia · Staff · Feb 7, 2015 at 12:28 am
Copy link
Nope. I don’t see any difference with the above two pages.

I checked https://nrengineering.wordpress.com/5-0-accolades/ and https://nrengineering.wordpress.com/3-0-our-team/ pages.
nagpalreema09 · Member · Feb 9, 2015 at 3:31 pm
Copy link
Meaning, you think the header titles are easy to read, correct? I just want to make sure the image is not getting in the way of the readability of the image.
staff-happychia · Staff · Feb 10, 2015 at 7:56 am
Copy link
I find it easy to read your title – N& R Engineering.

I think it will be nice if the menu items font size is restored to the theme default ones. But it is your site and your choice :-)
nagpalreema09 · Member · Feb 10, 2015 at 4:58 pm
Copy link
Is there a way to do that without making the main navigation go on to two lines? Because that’s really what I’m trying to avoid.
nagpalreema09 · Member · Feb 10, 2015 at 8:30 pm
Copy link
I think I fixed the main nav, and that it looks better!

But I do have another question: Can you help me re-position the title on the following two pages?
https://nrengineering.wordpress.com/5-0-accolades/

Our Team
staff-happychia · Staff · Feb 11, 2015 at 9:22 am
Copy link
The menu looks great in the single line.

I don’t see any problem with title. N&R Engineering- I suppose.

Could you elaborate what do you think is wrong with the title?
nagpalreema09 · Member · Feb 11, 2015 at 5:52 pm
Copy link
The title looks better, but it’s totally screwed up the site in responsive view. I want to be able to change this.

Regarding the header titles, the words “Accolades” and “Our Team” are a little difficult to read because of the images. I’m interested in changing the placement of the word and was told by WordPress staff that you could help me.
thesacredpath · Member · Feb 21, 2015 at 8:49 pm
Copy link
Hi there, 5.0 Accolades seems to only be an issue at screen/window widths 1230px and wider, which is where the image starts to downsize, so we can use a media query and positioning to move the title down below the landing gear on the plane.
```
@media screen and (min-width: 1230px) {
	.page-id-37 .hero .page-title {
		position: relative;
		top: 60px;
	}
}
```
The image on Our Team presents more of a challenge, but we can use two media queries to adjust it down to 1231px and then between 1230px and 1020px.
```
@media screen and (min-width: 1231px) {
	.page-id-16 .hero .page-title {
		position: relative;
		top: -100px;
		right: 400px;
	}
}
@media screen and (max-width: 1230px) and (min-width: 1020px) {
	.page-id-16 .hero .page-title {
		position: relative;
		top: -150px;
		right: 350px;
	}
}
```
Place the above three media queries at the bottom of your existing CSS with the second two below the first one above and see what you think.
nagpalreema09 · Member · Feb 23, 2015 at 2:03 pm
Copy link
Hello,

I liked the way Accolades moved down, but I wasn’t a fan of how it decreased the size of my main nav, as I have inputted some CSS to increase the width of the main nav so that the font could be larger. Does that make sense?
thesacredpath · Member · Feb 25, 2015 at 9:15 pm
Copy link
Hmmm, I just entered the first bit of CSS for the Accolades page, and didn’t see any change to the menu. The menu stuff isn’t in the same div as the page title, so what we added should not have had any effect on the menu. Can you explain a little further what it did to the menu, or perhaps take a screenshot and upload it to your media library and post a link to that image?
nagpalreema09 · Member · Feb 25, 2015 at 9:43 pm
Copy link
Hello, the first query worked but the second one didn’t. I’m okay with it though. I think it looks nice. Do you mind taking a look and seeing if the main nav is too small? I do feel like there is a small difference in the font size – don’t know if it was just me.

But I do have another question regarding the dropdown menu. For the “Our Work” portion, I’m still adding projects and fear that the dropdown is going to be too long. I spoke to the Support and they directed me to the CSS team. Is there a way to make this horizontal/table format to prevent it from looking extremely long?
thesacredpath · Member · Feb 26, 2015 at 4:00 am
Copy link
Yeah, I think it looks nice too. Great looking site, by the way. Love the images and colors.

I had replied in the other thread, and I though I had remembered seeing a way to do it, but couldn’t find it, but I took another stab at searching and found what I was looking for. Add the following CSS. I’ve narrowed the tabs in the sub, submenu down to 200px (from 244) and left a 5px gap between. See what you think, but make sure and narrow down your browser window to see how thing react. It appears to work fine, but it is always best to really test things. I’ve also limited this change to 1020px and wider screens/windows since that is when the touch menu activates.
```
@media screen and (min-width: 1020px) {
.sub-menu .sub-menu {
    -moz-column-count: 2;
    -moz-column-gap: 5px;
	-webkit-column-count: 2;
	-webkit-column-gap: 5px;
	column-count: 2;
	column-gap: 5px;
}
.main-navigation ul ul a {
    width: 200px;
}
}
```
thesacredpath · Member · Feb 26, 2015 at 4:02 am
Copy link
Oh, one other thing, this is supported on IE10 and later only. Anyone with IE9 will not see this change.
nagpalreema09 · Member · Feb 26, 2015 at 2:50 pm
Copy link
First, thanks for complimenting the site :) I’m extremely proud of it.

Second, the dropdown menu is definitely a step in the right direction. The only thing that seems kind of off is the alignment on Current Work. I was also wondering, is there a way to remove the space in the middle between the columns?

I checked my tablet and mobile, the responsive views look great!

No items found.