Jump to content


Photo
- - - - -

Nav Classic


  • Please log in to reply
9 replies to this topic

#1 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 396 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 20 October 2013 - 04:30 PM

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

 



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 20 October 2013 - 05:49 PM

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:

Please Login or Register to see this Hidden Content



#3 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 396 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 20 October 2013 - 06:53 PM

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.... 



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 20 October 2013 - 07:16 PM

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)!



#5 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 396 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 20 October 2013 - 07:30 PM

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

Please Login or Register to see this Hidden Content

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?



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 20 October 2013 - 07:37 PM

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.



#7 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 396 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 20 October 2013 - 07:42 PM

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...



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 20 October 2013 - 07:44 PM

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

 

Take care!



#9 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 396 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 21 October 2013 - 10:56 AM

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:

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content

screencapNew.jpg

 

Any suggestions how I might make this change.

 

Thanks in advance



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 17012 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 21 October 2013 - 12:15 PM

HI,

 

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