My navigation does not show correctly when viewed on android phones…

This topic has 6 replies, 2 voices, and was last updated 10 years, 4 months ago by Eric.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
December 8, 2013 at 10:39 pm #9400
m
Customer
After i uploaded the logo, the header doubled in height but I solved it. I edited the php functions and added the size for my logo in “custom header support”, indeed the header still remains double in height.

So, I added a new line of code to limit the height of the header here: /*
.site-header {
margin: 0 auto;
max-width: 1140px;
height: 77px;
}

As you can see I added: Height: 77px; Now the header shows like the demo and not double the height. The issue is that on the iPad it shows correctly although not so much to the right.
And on an android smartphone the header height stops right below the logo while the “custom nav menu” on the right shows to be the color of the content which is grey. It should be responsive and extend in height so that you can see the links of the “custom nav menu”.

The site is Longislandpctechs.com

I am hoping someone could help me, I would truly appreciate it!
Thank you!
December 8, 2013 at 11:02 pm #9405
Eric
Customer
Did you see my reply to your other post? – https://appfinite.com/topic/making-the-header-narrow-reducing-the-height/#post-9398

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
December 8, 2013 at 11:22 pm #9406
m
Customer
Eric thank you for your help, truly appreciate it. The logo issue is solved, the solution was in editing the php functions so I could upload the size of my logo.

Now I have another issue:

In the Epik demo there is no line of code to make the header 77px. I had to insert that line myself to make my header look like the demo’s one.
It is obviously not the right solution because when you look at my site from an iPad vertically or from a smartphone you will see the “custom nav menu” appears in the grey area, then you see the slider. I wanted the “custom nav menu” to appear in the blue area right after the logo just like in the demo.

The demo is responsive to the tablet/phone but not my site. I hope you can help me getting out of this tunnel 🙂
Thank you!
December 8, 2013 at 11:30 pm #9407
m
Customer
Here is the link of the mobile Epik demo: http://my.studiopress.com/themes/epik/#demo-phone You can see the logo: “Epik”, right below using the same background color (dark grey) you can see the nav links (custom menu widget).

With my website, you will see the logo on top just like in the demo, and right below you see the nav links (custom menu widget) but with a grey background color instead. This means that the header responds and extends the height for tablet/phone but with my site it stops at 77px because of the line of code I added.

If i remove that line of code (height: 77px), the site will respond to tablet/phones but then in the desktop version the height is doubled.

Hope you can see what I am trying to explain. Thanks again!
December 9, 2013 at 11:24 pm #9421
Eric
Customer
You should actually remove the height that you added for the .site-header –
```
.site-header {
    margin: 0 auto;
    max-width: 1140px;
    height: 77px;
}
```
Then remove the min-height for the #title link around line 1962 in your css file –
```
.header-image .site-title a {
    float: left;
    min-height: 164px;
    width: 100%;
}
```
That will fix your nav issue and will allow it to show back in the blue area again. The final step would be what I suggested in the other thread, which would be adjusting the padding for the top and bottom of that widget area….if you need to remove some of that space. This is what the end result will look like (don’t mind the part that says long island, that’s just a pop up from hovering over the link area) – http://i.imgur.com/JjgXcIC.png

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
December 10, 2013 at 10:13 am #9425
m
Customer
Eric thank you again for taking the time to help me, I truly appreciate it!

I did exactly like you said, first I removed the min-height 164px, removed the line of code height 77px then I adjusted this:

.header-image .site-header .widget-area {
padding: 10px 0;
padding: 1.0rem 0;

The nav is back into the blue area on the phone and iPad. I only have one curiosity left if you could answer it please:

Why is it that I had to modify the css this way to make it look like the demo but the css in the demo is different?
Meaning, in the demo the height of the header is small indeed in the css Wes keeps the min-height to 164 and neither he had to adjust the padding rem in the line above, what makes the difference?

Thank you again Eric, I appreciated your help!
December 11, 2013 at 9:13 pm #9472
Eric
Customer
It could be the custom code you’ve added (which may have offset things), or because you’re using an image (which pulls in different css than a text logo).

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.