navigation menu « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

elames
Member

So, I am just about done with my site. Everything looks good in Chrome.

I start previewing it in other browsers. IE and Firefox show my last menu item wrapping to another line.

It was the same with my logo. So I resized it and that is ok But what is up with this navigation? Why isn't it being seen the same in IE and Chrome?

The site is: http://pineyhillbandb.com/wordpress/

Posted 9 months ago #
Ismael
Moderator

Hi elames,

I just checked your site using Chrome and IE 8, and the navigation menu looks fine. IE and Chrome can't really look totally the same, they are different platforms but on the other hand, this theme is also made to look good in IE just don't expect it to look totally the same. :)

Regards,
Ismael

Posted 9 months ago #
elames
Member

Looks fine in Chrome but I have IE 9 and CONTACT wraps to a second line. How can I reduce the amount of space on the menu bar by the first HOME link? I have been using firebug to try different margins but none is doing what I want it to do.
Thanks

Posted 9 months ago #
Mya
Hi elames,

Try this:
```
.main_menu ul:first-child > li > a {
margin-left: 20px;
}
```
When I altered the margin-left from 30px to 20px in Firebug the margins reduced. If you need to use !important.

Regards,
Mya
Posted 9 months ago #
elames
Member

thanks that helps, but the look I want is that the entire menu looks centered not a huge margin on the left and a smaller one on the right?

Posted 9 months ago #
Mya

To reduce the space on the left, you'll need to adjust the 20px. Try 23px.

Regards,
Mya

Posted 9 months ago #
elames
Member

I got it adjusted however, when I try to access the site on my tablet, this theme is not responsive, the navigation menu wraps to a second line when turned in portrait mode and even when it is in landscape, I cannot get any of the dropdown sub menus to show up. Can you tell me what I need to change? I tried adding more space to the header but still not getting the dropdowns to show. This is critical to the site.
It looks like the dropdowns are hiding behind the slider images. Because as the slider or header image is loading, I can point to the menu and see it. But after the image has loaded it is hidden.

http://www.pineyhillbandb.com/wordpress

Posted 8 months ago #
Ismael
Moderator
Hi,

On Theme Options > Layout & Settings > Responsive Layout, choose "Responsive Layout". Is it set on your end?

Open layout.css, and find this code
```
/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
```
Try to adjust the max-width. What is the resolution of your tablet?

Regards,
Ismael
Posted 8 months ago #
elames
Member

Yes, responsive is selected. I have no idea what the resolution is on my tablet. It is a samsung Galaxy 10.1 inch screen. The site looks fine in landscape but when I rotate the device to portrait/ vertical. the navigation goes to a second line and cannot be seen.
Where do you find the layout.css?

Most important problem with the tablet is that the dropdown menu is not showing. It looks like it has been hidden by the slider / top header images on the pages. I can't have that. what is to be done?

Posted 8 months ago #
elames
Member

Do I have you stumped??? I sure would like some help with this please :-)

Posted 8 months ago #
Mya

Hi elames,

The layout.css is located in the theme's /css/ folder. I'm going to tag the rest of the support team to see if one of them has a tablet to test on.

Regards,
Mya

Posted 8 months ago #

Hey!

Try to add following code to css/custom.css:

.responsive .main_menu div, .responsive .logo a, .responsive .logo img {
    height: auto;
    max-width: 100%;
}

Best regards,
Peter

Posted 8 months ago #

elames
Member

I will try this. I am fairly new to using a tablet. But one of the features I really like is the ability to zoom in on the pages with the pinch and pull of the fingers. I notice that Coherence will not allow me to do this? Is this working properly?? Isn't that part of being responsive?

I still want to know why my drop down menus will not show on the tablet.

Posted 8 months ago #
Devin
Moderator

Hey elames,

Just on the issue of zooming in and out, that isn't part of the responsive design. Responsive is changing the layout to adapt to the viewing device. So on a full screen computer you don't have any layout changes but as you get to a smaller device it doesn't just shrink the whole page it instead responds to the new size constraints and changes the layout accordingly.

If you just want to zoom in and out on the page without it changing any layout, you can turn off that feature in Layout & Settings> Responsive Layout.

What this means for you and your site is that the current navigation menu you have is too long for the smaller tablet size and so the navigation items get wrapped to a second line. The layout doesn't yet say "this device is small enough to need just the mobile dropdown nav" so it shrinks the space and leaves the menu intact.

You could either turn off responsive layout or shorten the amount of links in your main menu to quickly fix the issue.

Regards,

Devin

Posted 8 months ago #
elames
Member

I tried turning off responsive...it did not help. The major problem now is the dropdown menus will not show when you mouse over them in the navigation menu. They are there but it is like the slider is hiding them. Because when the page is loading the slider, you can see the dropdowns then as soon as the slider loads, you cannot see them. This only is happening on the tablet. And it is important that this works now that so many people use them and smartphones.

Thank you!

Posted 8 months ago #
Devin
Moderator

Try turning off responsive layout and then viewing the page a few times on your tablet. It might be that its viewing a cached version as I don't see anything when the site is at its full layout that would cause it to hide the menus.

With some quick googling it looks like there are some issues with the Galaxy tablets and basic browser features so it may be an issue that will take more time to tackles as I don't think any of us even have one to test or debug on.

Posted 8 months ago #
elames
Member

Tried that and it didn't help. I have lots of other sites with drop downs I have created and all of them show up on my tablet. It is just this one specific site. Really haven't done much different. Made some custom styles but nothing out of the ordinary I can see.
I will keep on trying things
THanks

Posted 8 months ago #
Devin
Moderator

Have you checked the demo site to see if it has the same behavior? As far as I know tablets don't have the ability to replicate hover states which is what the menu works on so getting a dropdown to appear may be a technical issue all together.

Regards,

Devin

Posted 8 months ago #