Community Forums › Forums › Archived Forums › Design Tips and Tricks › Magazine Pro – Mobile Navigation
Tagged: Magazine Pro, mobile, navigation
- This topic has 10 replies, 3 voices, and was last updated 10 years ago by BlueNinja.
-
AuthorPosts
-
March 26, 2014 at 7:30 am #96712BlueNinjaMember
Hello Everyone,
Hope your all having a great day 🙂
I am working on a new website using Magazine Pro and I am only using the Secondary navigation menu bar, However when viewing on mobile device if you select a menu item, the page loads but the user cant see the content change due to the menu filling the device screen.
Is there anyway to add some mobile code or something that will make the user experience better ??
Would love any tips or suggestions 🙂
PS the link is to our staging site so feel free to have a look although its not finished yet..
http://shottlehall.staging.wpengine.com/March 26, 2014 at 7:34 am #96714Mayur SomaniMemberThe user must scroll down a bit to see the content 🙂
A solution would be to use a smaller font size on smaller screen. You can use media queries to do it.
March 26, 2014 at 8:00 am #96718BlueNinjaMemberThanks for the reply Mayur,
Do you think it would be possible to make the secondary navigation menu act like the Primary navigation when viewing on using media queries ???
Also any tips on how I could do this ??
Kind Regards
James
March 26, 2014 at 11:27 am #96767AnitaKeymasterYou can copy the same code used for the mobile primary nav to the secondary nav and it should work fine for you.
Love coffee, chocolate and my Bella!
March 26, 2014 at 5:20 pm #96855BlueNinjaMemberHey Anitac,
Thanks for the reply
Would you be able to point me in the right direction for this ??
Cheers
James
March 26, 2014 at 8:03 pm #96878AnitaKeymasterLook for this in your media queries:
.nav-primary .responsive-menu { display: none; } .nav-primary #responsive-menu-icon { display: block; text-align: center; }
Change the word primary to secondary, save and see if it works.
Love coffee, chocolate and my Bella!
March 27, 2014 at 7:24 am #96923BlueNinjaMemberHello Anitac,
Thanks for all your help,
This is what I have ???
/* Site Navigation ---------------------------------------------------------------------------------------------------- */ .genesis-nav-menu { clear: both; color: #222; font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 400; line-height: 1; text-transform: uppercase; width: 100%; } .genesis-nav-menu .menu-item { display: inline-block; text-align: left; } .genesis-nav-menu a { border: none; color: #222; display: block; padding: 25px 20px; position: relative; } .genesis-nav-menu a:hover, .genesis-nav-menu .current-menu-item > a, .genesis-nav-menu .sub-menu .current-menu-item > a:hover { color: #e8554e; } .genesis-nav-menu .sub-menu { left: -9999px; opacity: 0; position: absolute; -webkit-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; width: 190px; z-index: 99; } .genesis-nav-menu .sub-menu a { background-color: #fff; border: 1px solid #222; border-top: none; font-size: 12px; padding: 20px; position: relative; text-transform: none; width: 190px; } .genesis-nav-menu .sub-menu .sub-menu { margin: -53px 0 0 189px; } .genesis-nav-menu .menu-item:hover { position: static; } .genesis-nav-menu .menu-item:hover > .sub-menu { left: auto; opacity: 1; } .genesis-nav-menu > .first > a { padding-left: 0; } .genesis-nav-menu > .last > a { padding-right: 0; } .genesis-nav-menu > .right { color: #fff; display: inline-block; float: right; list-style-type: none; padding: 25px 0; text-transform: uppercase; } .genesis-nav-menu > .right > a { display: inline; padding: 0; } .genesis-nav-menu > .rss > a { margin-left: 48px; } .genesis-nav-menu > .search { padding: 7px 0 0; } /* Site Header Navigation --------------------------------------------- */ .site-header .sub-menu { border-top: 1px solid #222; } .site-header .sub-menu .sub-menu { margin-top: -54px; } /* Primary Navigation --------------------------------------------- */ .nav-primary { background-color: #222; left: 0; position: fixed; top: 0; width: 100%; z-index: 999; } .admin-bar .nav-primary { top: 32px; } .nav-primary a { color: #fff; } .nav-primary a:hover, .nav-primary .sub-menu a:hover, .nav-primary .genesis-nav-menu .current-menu-item > a { color: #e8554e; } .nav-primary .genesis-nav-menu .sub-menu a { background-color: #222; border: 1px solid #fff; border-top: none; } /* Secondary Navigation --------------------------------------------- */ .nav-secondary .wrap { border-bottom: 1px solid #222; } /* Responsive Menu --------------------------------------------- */ #responsive-menu-icon { cursor: pointer; display: none; padding: 10px 0; } #responsive-menu-icon::before { -webkit-font-smoothing: antialiased; color: #fff; content: "\e00e"; font-family: 'Icon'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; margin: 0 auto; speak: none; text-align: center; text-transform: none; }
March 27, 2014 at 7:24 am #96924BlueNinjaMemberAs you can see I am pretty confused here ???
March 27, 2014 at 8:24 am #96941AnitaKeymasterNo, you should have a section farther down the code in the Media Queries section or it might be called Responsive Design. More towards the bottom of the style sheet.
Love coffee, chocolate and my Bella!
March 27, 2014 at 8:50 am #96949BlueNinjaMemberOK thanks Anitac,
I have now found this 🙂
I have edited as mentioned above but does not seem to be doing anything ??
@media only screen and (max-width: 768px) { .footer-widgets, .nav-secondary, .site-footer, .site-header, .site-inner { padding-left: 5%; padding-right: 5%; } .genesis-nav-menu > .first > a { padding-left: 20px; } .nav-secondary .responsive-menu { display: none; } .nav-secondary #responsive-menu-icon { display: block; text-align: center; } .home-bottom .featured-content .entry, .home-middle .featured-content .entry { padding-bottom: 20px; } .archive-pagination li a { margin-bottom: 4px; } .five-sixths, .four-sixths, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds { margin: 0; width: 100%; } }
April 9, 2014 at 5:01 pm #99404BlueNinjaMemberSorry to *Bump* this post.... but anyone else have any thoughts on this ??
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.