Jump to content
Sign in to follow this  
prodpi

Dealing with a long menu on lower res screen

Recommended Posts

prodpi    0
prodpi

Site URL

 

www.prodpi.com

 

Go to Services/Press Products

 

The number of items goes below a smaller computers screen will show. 

 

Is there a way to make it scroll, or possibly have two columns?

 

 

Share this post


Link to post
Share on other sites
prodpi    0
prodpi

Just a note, I had to split the press products because our customers weren't see the bottom items.  Let me know if you need a screenshot of the entire list before I split it.  I can change it back for a quick moment.

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, when you view the menu on a small screen, like a mobile the menu will collapse and the drop down will appear underneath like in the screenshot below

 

http://screencast.com/t/alOTwfKBR

 

What size screen are we talking roughly? You can add a scroll to the menu using the css command - {overflowscroll;} if you wanted to but without doing a far bit of customization I don't think you'll be able to get them into two columns.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
prodpi    0
prodpi

I have a 15" retina set to standard Retina mode.  However my 11" Mac Book Air can not see the entire list, it falls off of the bottom of the screen.  I will try the scroll and let you know!  Thanks!

Share this post


Link to post
Share on other sites
prodpi    0
prodpi

This might sound dumb, but what is the CSS category for the menu, I assume I can't just put {overflowscroll;} in the CSS rules section of the Custom Code area.

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, no you'll need to put the id of the section in front of it. We'd usually encourage you to find this using firebug or chrome developer tools for locating css. But this one is quite hard to find as it's only active on hover, so as soon as you move the mouse it changes. Therefore I've copied below for you :-)

 

.navbar.plnav_hover .sub-menu .dropdown-menu {
    overflow: scroll;
}


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
prodpi    0
prodpi

So I put the scroll function in and set my monitor res to 1280x800.  The scroll doesn't seen to appear and I can't see the entire menu.  Am I missing something?

 

pl1.png

Share this post


Link to post
Share on other sites
James B    436
James B

Should show something like this. - http://screencast.com/t/2pP4BVrcdXPO

 

Try adding a height to it.

 

.navbar.plnav_hover .sub-menu .dropdown-menu {
    height: 150px;
    left: 100%;
    margin-top: -1px;
    overflow: scroll;
    position: absolute;
    top: 0;
    visibility: hidden;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×