Mobile Navigation Menu Adjustment

[Burbank]

Hi all,

I'm using the Cento theme, and would like to make a small adjustment to the mobile phone's navigation menu display.

Right now, the total number of link selections in the mobile navigation menu do not display, and require the visitor to scroll down. When viewed on iPhone 6, the last 2 links – FAQ and Contact – are actually not visible at all, and there's no indication to the visitor that they should scroll down for more links).

I'd really like it so that all the links would be visible, without the visitor having to scroll down.
Is there a way I can specify in the CSS for the menu to display longer, and include all the links without scrolling?

Thanks in advance for any suggestions!

-B

[Queso]

Hey there!

We aren't able to advise on custom CSS, but an excellent place to start would be the documentation here.

[Burbank]

Hi,

Maybe you'll be able to help in this fashion:

I'm using the Cento Theme.
Is there a way I can have the mobile navigation menu work/display as it does in the "Clean Lines" theme?

Thanks for any advice or help.

-B

[Queso]

So far as I know, there certainly should be, and I wouldn't be surprised if some of our community here could point you in the right direction. As for me, though, I'm no coder, so the details are beyond me, I'm afraid.

[Burbank · Accepted solution]

For anyone who stumbles upon this thread who, like me, is no expert at using CSS: Here is some help that will likely save you many, many, many hours of Googling plus all the trial and error.

I make no warranties or guarantees,
but here's how I was able to make the adjustment I needed:

========================================================

MOBILE MENU HEIGHT CONTROL

max-height: calc(#px); <------ set to just a pixel value, like this

body.nav-open .mobile-nav {
max-height: calc(100vh - 70px); <------ set this to just a pixel value
padding: 10px 0;
opacity: 1;

========================================================

MOBILE MENU BACKGROUND COLOR

.mobile-nav {
position: fixed;
top: 50px;
left: 0;
z-index: 9;
display: block;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
height: 100%;
max-height: 0;
padding: 0;
opacity: 0;
background: #fff0cc;  <----------------------------- COLOR
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}

========================================================

MOBILE MENU
LEADING CONTROL BETWEEN LINK ITEMS

ORIGINAL:
.mobile-nav ul li {
float: none;
display: block !important;
margin: 0;
padding: 4px;  <------------------------- PADDING VALUE
border: none;
text-align: center;

========================================================

                        Do a good deed. Pay it forward.

========================================================