Magazine Pro – Mobile Navigation

Community Forums Forums Design Tips and Tricks Magazine Pro – Mobile Navigation

This topic is: not resolved

This topic contains 10 replies, has 3 voices, and was last updated by  BlueNinja 5 months, 3 weeks ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #96712

    BlueNinja
    Member
    Post count: 24

    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/
    #96714

    Mayur Somani
    Participant
    Post count: 78

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

    #96718

    BlueNinja
    Member
    Post count: 24

    Thanks 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

    #96767

    AC
    Blocked
    Post count: 7712

    You can copy the same code used for the mobile primary nav to the secondary nav and it should work fine for you.

    #96855

    BlueNinja
    Member
    Post count: 24

    Hey Anitac,

    Thanks for the reply

    Would you be able to point me in the right direction for this ??

    Cheers

    James

    #96878

    AC
    Blocked
    Post count: 7712

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

    #96923

    BlueNinja
    Member
    Post count: 24

    Hello 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;
    }
    
    #96924

    BlueNinja
    Member
    Post count: 24

    As you can see I am pretty confused here ???

    #96941

    AC
    Blocked
    Post count: 7712

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

    #96949

    BlueNinja
    Member
    Post count: 24

    OK 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%;
    	}
    
    }
    
    #99404

    BlueNinja
    Member
    Post count: 24

    Sorry to *Bump* this post…. but anyone else have any thoughts on this ??

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.