Awkward Break Points

[Cody Balos]

Hello,

I am having an issue with awkward breakpoints for my navigation menu and the logo. When on a mobile device like an iPhone, the text-logo gets covered up by the menu. Also starting at the resolution 768px (width) and ending at 1027px width, my navigation menu is positioned awkwardly. Is the solution to this going to be to change the defined breakpoints (i.e. when it’ll switch to the drop-down menu or the normal menu)? If so where would I go to do this? If this is not the best soltution, please help me find out what is.

Thanks, btw the theme is awesome!

[Bill Robbins]

Good Morning Cody,

I’m glad to hear you’re liking the theme. We can change when the mobile menu takes over. If you’d like it to pick up at 1027 pixels wide, here’s how you can do that:

1. Go to the Theme Options page and select the Advanced Tab.
2. Scroll down to the Custom CSS box and paste this:

   
   @media only screen and (max-width: 1027px) {
   	
   	#primary-menu {
   		display: none;
   	}
   	
   	.slicknav_menu {
   		display: block;
   		right: 0;
   		top: 10px;
   	}
   
   }
   

3. Save your changes.

See if that won’t rearrange when the swap out for you. If you have any trouble, let me know.

Have a great weekend,
Bill

[Cody Balos]

Thanks, that did fix that problem.

Now on to one other issue, the text-logo. On small (like an iphone) screens it gets covered up instead of adjusting in size. I tried changing the font-size to percentage in order to provide some flexibility, but for some reason it does not seem to scaling as normal (by normal i mean compared to when I’ve used it with other projects).

A second issue is that in the hero title I want to keep two portions on a separate line at all times.

[Bill Robbins]

Glad that worked for you. Let’s see if we can take care of these other items too:

For the font size you’re welcome to use a percentage or em or rem instead of pixels there. You may need an important declaration to make sure that it sticks. Try this:

1. Go to the Theme Options page and select the Advanced tab.
2. Scroll down to the Custom CSS box and paste this:

   
   @media only screen and (max-width: 520px) {
   
   	#text-logo h1,
   	#text-logo p {
   		font-size: 100% !important;
   	}
   
   }
   

3. Update your settings.

---

You can also insert a line break into the hero title if you’d like to. That will voce a return there so to speak. Just place this snippet where you’d like to have that:

<br />

and that should do it.

If you run into any questions, just let me know.

Thanks,
Bill

[Cody Balos]

Alright this is going great! Now one more question on this topic. Something I have done seems to have messed with header bar. It floats off the top of the screen bit on smaller sizes (i.e. it doesn’t stick to the top of the screen)

Thank You SOOOOOO Much! You’re theme is wonderful and the support magnificent!

[Bill Robbins]

Good Morning Cody,

I hope you had a great weekend. Your site’s really looking great by the way. I look a look at your header on my iPhone 5S and with a desktop browser that’s been reduced in size. In both of those it looks like the header was sticking in place like you would expect (see attached screenshot).

If you’re seeing something different there, let me know and also which browser, device and version you’re using too.

Thanks,
Bill

Attachments:

1. 

   Screen-shot-2014-03-03-at-10.05.52-AM-399-x-89.png
   

[Cody Balos]

The problem occurred during scrolling, BUT I figured out why. It was simply because if the wordpress admin menu. When I view it not logged in, it is just fine.

Thanks for all the help!

[Bill Robbins]

I could see that since both the admin bar and the theme header would be fixed at the top. Glad you found a solution for you. If you need anything else, just let me know.

Thanks,
Bill

[Author]

Posts