• 0
Sign in to follow this  
Followers 0

Nav Classic

Question

Posted · Report post

Hi all

 

Working on our site at the moment (almost there) -  www.magva.com however I need to find a solution for an annoying problem on mobile devices. 

 

For the aesthetic I was after I had to opt for the Nav Classic. On mobile devices this overlaps (iphone) the content.

 

The best solution that I can think of would be to have the Nav Classic on most platforms (including iPad), but when someone looks at the site with an iPhone or similar an alternative menus system (maybe NavBar) could be called in its place. Is this possible?

 

If so can anyone point me towards some details. 

Many thanks in advance.

Keith

 

Share this post


Link to post
Share on other sites

9 answers to this question

  • 0

Posted · Report post

Hi Keith,

 

I don't think that's going to be easy, as you're going to have to set up a mirror, and apply NavBar to that, and use some conditional code to select which version displays on mobile devices. 

 

However, I can solve your problem with a small purchase.  Ubermenu can be styled to look exactly like NavClassic does, but when it's on a mobile device, it works like NavBar and best yet, it displays the menu and submenu in line, not off to the side, so people can just scroll up and down through it.

 

Here's the link: http://codecanyon.net/item/ubermenu-wordpress-mega-menu-plugin/154703

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I had a quick look earlier at ubermenu and was fearful that it would be over kill for my needs. 

 

If I could get it to look just like what I have in the header ATM, it's a no brainer. Am tinkering with Navbar at the moment and have managed to get some of styling.... 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Keith,

 

I use it myself, and quite honestly, it has the best CSS configuration system I've ever seen.  Everything's done with settings.  No code needed.  You can add colors with color pickers, paddings, curved corners, vertical dividers, all with simple, straightforward settings. Even gradients, if you want them.

 

They give you complete control over the way it looks, how it behaves and their support is as good as mine (if not much better)!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

A1 Rob. Might just invest the few pennies in it. 

 

Maybe its the stubborn side of me, but seeing as I have some some of the way with the Navbar CSS I'd love to see if I could achieve a good result (if for nothing more that the learning exercise). 

 

In the end I opted for your suggesting on the header with the universal side bar and the menu. Getting so close to what I want now maybe the best option will be ubermenu. 

 

Here is the code I have input to manipulate the Navbar

#site .navbar {
background-color: rgba(0, 0, 0, 0);
background-image: none;
border: 0 none;
box-shadow: none;
}

#site .navbar { margin-right: 0; width: 100%; }
#site .navbar ul { text-align: center; float: none; }
#site .navbar .pldrop ul { text-align: left; float: none; }
#site .navbar li { float: none; display: inline-block; }
#site .navbar li a { font-family: 'Melbourne', sans-serif; font-size: 15px; font-weight: 400; font-style: normal; padding: 5px 26px 12px; }
#site .navbar ul li a { color: #ffffff; }
#site .navbar li:hover a { color: #925c21; }

#site .navbar .sub-menu .dropdown-menu ul li a { color: #ffffff; background-color: 28131e; }

What I'd like to achieve next is to have the drop down the same colour as the header (or menu) and the font the same colour as in the header only changing to brown on the roll over, and to loose the blue highlight! 

 

Also if you close on the Home button its slightly darker (its the active page). Would like to remove that shading also. Its only a shame I don't have this menu on a live site...

 

Menu%20Grab%20section.jpg

 

With ubermenu is it also possible to add web fonts? notice I have Melbourne running on the site?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You may definitely use the fonts of your choice, and you'll also see you can use internal settings to control it, changing the size, and color.  The color bit is particularly helpful, as they give you options for regular link colors, as well as hover options on all levels. So, as you have the font pictured above in white, you could make it a pale yellow, for example, on hover, or in the drop downs, you can make it any contrasting color combination for the links. (Hover, background, normal color.)

 

Best of all, you won't need a bit of that CSS you've so carefully written.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Rob. Will continue slaving over the code for another while, but I suspect I'll be opting for ubermenu in the end. 

 

Best get some rest. I appear to have locked myself out of my own site.... Too many bad login attempts...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yeah, it sounds like you need some rest, a good dinner and a night's sleep.

 

Take care!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Update - Have installed ubermenu on my local site and after a little struggle figured out most of the settings to get the styling right. 

 

The the woocommerce menu cart plugin had to be css coded because it did not take up the styling configuration from the ubermenu settings (this was not required for the nav classic, brandnav or navbar)

 

code:

.wcmenucart-display-standard a  { color: #ffffff; }
.wcmenucart-display-standard a:hover { color: #925c21; }

I have one remaining problem to solve - The ubermenu is center aligned on the site (as required), the dropdown menus are also aligned center which I what aligned left. Have tried this in css with no success:

.megaUber. megaMenu .sub-menu .sub-menu-1 ul { text-align: left; }

screencapNew.jpg

 

Any suggestions how I might make this change.

 

Thanks in advance

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

HI,

 

Ubermenu is a third party plugin, we do not provide support for third party extensions, you will need to contact Ubermenu support.

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  
Followers 0