Navigation Bar Problem

[Rob222]

Hi there,

I’ve noticed a problem with my Navigation menu. When browsing my site using my Ipad Mini, the navigation menu drops down 2 lines when viewing in ‘Portrait’ view – So not exactly appearing great on a smaller screen size. I’ve attached a picture to show you.

But the navigation header – ‘Shop’ drops down on a second line. Also my social icon, ‘Pinterest’, drops down to a second line making my site appear very unprofessional.

Can you fix the above for me please and make it so that my top social icons and navigation bar links all appear only on one line?

Thank you very much,

Rob

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Add the code below to your custom css option.

@media only screen and (max-width: 959px) and (min-width: 768px){
.container .four.columns {
width: 116px;
}
}

@media only screen and (max-width: 959px) and (min-width: 768px){
.container .twelve.columns {
width: 548px;
}
}

-Rui

[laranz – SUPPORT]

Hi,

Try this solution too,

@media only screen and (max-width: 959px) and (min-width: 768px){
#main-navigation { width: 81%; }
#menubar-controls { width: 15%; }
#top-bar-menu { width: 65%; }
#top-bar-social { width: 28%; }
}

Sometimes, tweak the columns width may give unexpected results.

Let us know,

Thanks,
laranz.

[Rob222]

Hi Laranz, your solution worked, thank you.

Thanks also for the help Rui.

Much appreciated.

[laranz – SUPPORT]

Hi,

Glad it works 🙂

Let us know, if you have any other questions.

Thanks,
laranz.

[Rob222]

This reply has been marked as private.

[Rob222]

Hi there,

Any help please?

[laranz – SUPPORT]

Hi,

Sorry for a late response, Try this code.

@media only screen and (max-width: 959px) and (min-width: 768px){
#menu-main-menu li a { padding-left: 9px; }
#main-navigation { width: 86%; }
#main-navigation { width: 86%; }
}

Let us know,

Thanks,
laranz.

[Rob222]

Hi Laranz,

It worked slightly. But I still have the shop menu button and my search icon plus login icon dropped down on a second line.

Anything else I can do to get everything on one line?

[laranz – SUPPORT]

Hi,

Try to adjust the width % I gave in the Custom CSS.

Let us know,

Thanks,
laranz.

[Rob222]

Hi,

Still hasn’t fixed the problem. I ended up changing the custom CSS from 86% to 100%, The navigation button ‘Shop’ jumps up to one line with the other buttons but the search icon and account icon still remain on a second line. Really annoying.

Any more ideas?

[Rui Guerreiro – SUPPORT]

Hi Rob,

Can’t reproduce the situation you described.

This is what I get by reducing the browser window(when I reduce 1 more pixel it appears the dropdown menu)

https://www.dropbox.com/s/9zck173zkebx4pr/menu_display.png?dl=0

Can you take a screenshot of what you are seeing? Clear the cache first.
thanks

-Rui

[Rob222]

Your screenshot shows exactly what I see on my ipad mini. You will notice that the search icon and account icon have dropped down to a second line. I want those two icons to be up next to the shop button.

[laranz – SUPPORT]

Hi,

My bad, I gave a wrong CSS ( copy paste the same styles in the second line. doh. )

Try this one.

@media only screen and (max-width: 959px) and (min-width: 768px){
#menu-main-menu li a { padding-left: 9px; }
#main-navigation { width: 86%; }
#menubar-controls { width: 10%; }
}

Let us know,

Thanks,
laranz.

[Rob222]

Hi there,

The search icon and account icon are now up on one line. Which is good. But there’s still a problem. One button – ‘Shop’ button has now dropped down a second line. Can you suggest a way to bring the shop button up onto just one lines please?