Vertical menu responsive?? Everybody, Artisteer, jrgweb, Zach


Author Message
Tayeb

Posted: 6/6/2014
Quote message 

can u help me in how to make vertical menu responsive??

thank u advance
 
jrgweb

Posted: 6/8/2014
Quote message 

@Tayeb - Well, this is kinda of a tricky question.

The answer is yes, "I can make the vmenu responsive" but there are a number of ways to do this and many scenarios.

Question: Is this a static website or a CMS like joomla or word press?
Are you going to have a horizontal menu different than the vertical menu?

Let's look at scenario #1 -
Let's say your website design is not going to use a horizontal menu, just one vertical menu. In artisteer we can duplicate the vertical and horizontal menu's.
So on large screens, let's turn off the horizontal menu and only display the vertical menu. When phone or tablet or when screen size is reduced, then the horizontal menu is then activated.

This demo site has both horizontal and vertical menu. Horizontal only display's in responsive mode and the vertical display's only for large screens.
example site: http://demo.artisteertoday.com/loconz/

Scenario #2
Okay, let's say scenario #1 doesn't work for your design for some reason or another. Let's just make the vertical menu responsive as easy as we can.

In this demo I've added some jquery and css along with media queries to allow for the vertical menu to responsive.

http://demo.artisteertoday.com/vertical_menu_responsive/

Obviously, scenario #1 is the easiest but... :-)
 
Tayeb

Posted: 6/9/2014
Quote message 

Thanks a lot orgweb, i knew you should have some solution, are are truly amazing :-) am appreciating too much ur eager to help. scenario 1 is fine, i added the css to the file.

one more question when u have time :-) is it possible to customize the responsive button in artisteer file?
 
jrgweb

Posted: 6/9/2014
Quote message 

@Tayeb - Actually, yes the button can be styled.

.art-menu-btn:hover span {
background: none !important;
}
.art-menu-btn span {
background:transparent !important;
}
.art-menu-btn {
background-image: url('images/joomlaicon.png')!important;
background-size: 100% !important;
background-repeat: no-repeat !important;
}

demo site: http://demo.artisteertoday.com/menu_respon_image/
 
Tayeb

Posted: 6/12/2014
Quote message 

Thank you jrgweb :-)
 
jrgweb

Posted: 6/13/2014
Quote message 

@Tayeb
Your welcome!
 
Ross

Posted: 10/20/2015
Quote message 

Hi, the demo sites are no longer up and I don't know how to achieve either scenario 1 or scenario 2 - can you help?
 
James G

Posted: 10/20/2015
Quote message 

Can you give us an idea of how you are going to display your menu's?
hmenu plus vmenu
vmenu
hmenu
hmenu on desktop vmenu on responsive
 
Ross

Posted: 10/20/2015
Quote message 

I have a site which has a header image but no hmenu. I have a single vmenu that I would like to be responsive when viewed on a smartphone device.

The Site is www.penicuiksouthbadminton.com as an example. I want to drop the header and just have a responsive vmenu on the mobile smartphone devices.

Thanks!
 
James G

Posted: 10/21/2015
Quote message 

I'm pushed for time right now but later today I'll give examples.
 
James G

Posted: 10/21/2015
Quote message 

Okay, here are a few ways to do this.

Method number one.
In artisteer, it lets you create two identical menus. 1 horizontal and 1 vertical. View image below.

https://drive.google.com/file/d/0B-n77YpTPCd2eUdZV0dfWG5oNGc/view?usp=sharing

here is the css that makes it happen. Horizontal menu is only displayed on phone mode but vertical menu only displays on tablet and desktop.
All this can be adjusted to meet your needs.


.art-nav {
display: none;
}
@media (max-width: 480px) {
.responsive .art-nav {
display: block !important;
}
.responsive .art-vmenu, .responsive .art-vmenublockheader, .art-vmenucontent {
display: none !important;
}
}


Method number two.
I've created a custom js script. This allows me to use horizontal and vertical if I wish.
In this example, I have a vertical menu displayed on desktop. When screen size is smaller, tablet and phone it now is responsive and displays at the top. Both the MENU and icon are links. In this script I also move the sidebar down below the content.

http://vmenu.houslerwebdesign.com
 
tony

Posted: 5/23/2017
Quote message 

Quote Ross:

I have a site which has a header image but no hmenu. I have a single vmenu that I would like to be responsive when viewed on a smartphone device.

The Site is www.penicuiksouthbadminton.com as an example. I want to drop the header and just have a responsive vmenu on the mobile smartphone devices.

Thanks!

ok so how did you do that please