Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive menu: edit text color and center drop-down alignment – education pro
- This topic has 2 replies, 2 voices, and was last updated 9 years, 5 months ago by lilysimulado.
-
AuthorPosts
-
November 5, 2014 at 4:55 am #130567lilysimuladoMember
Hi everyone, I'm currently stuck trying to edit the text color of the responsive menu and align the dropdown menu box to the center.
Currently when clicking on the sites menu icon on my phone I can't see the text and I think it's because the background and the text is white. Can anyone please point me on the right direction to change the text color of the responsive menu.
My current code is
/* Responsive Menu --------------------------------------------- */ .responsive-menu-icon { cursor: pointer; display: none; margin-left: -400px; } .responsive-menu-icon::before { content: "\f333"; color: #0000FF; display: block; font: normal 20px/1 'dashicons'; margin: 0 auto; padding: 10px; text-align: center !important; }
Thanks for taking the time to help.
Lily
http://theprepbook.comNovember 5, 2014 at 4:59 am #130569mickmelMemberAround line 2453, the color is set to white; change it to something else and that should fix the display issues.
November 5, 2014 at 8:19 am #130590lilysimuladoMemberThanks mickmel that worked brilliantly! Now I just have to adjust to center the dropdown menu, right now it's always showing to the far right which makes it hard to see when using a mobile. I have tried to adjust some of the code below to center it but can't seem to get the dropdown menu box to move, do you have any advice on what to edit to make that happen?
.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu, .genesis-nav-menu.responsive-menu { display: none; } .genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon { display: block; } .genesis-nav-menu.responsive-menu .menu-item:hover { position: static; } .genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover, .genesis-nav-menu.responsive-menu li a, .genesis-nav-menu.responsive-menu li a:hover, .genesis-nav-menu.responsive-menu li.current-menu-item > a { background: none; color: #444; display: block; line-height: 1; padding: 12px 0; } .genesis-nav-menu.responsive-menu .menu-item-has-children { cursor: pointer; } .genesis-nav-menu.responsive-menu .menu-item-has-children > a { margin-right: 60px; } .genesis-nav-menu.responsive-menu > .menu-item-has-children:before { content: "\f347"; float: right; font: normal 16px/1 'dashicons'; height: 16px; padding: 11px 0; right: 0; text-align: right; z-index: 9999; } .genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before { content: "\f343"; } .genesis-nav-menu.responsive-menu .sub-menu { left: auto; opacity: 1; position: relative; -moz-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; width: 100%; z-index: 99; } .genesis-nav-menu.responsive-menu .sub-menu .sub-menu { padding-left: 20px; margin: 0; } .genesis-nav-menu.responsive-menu .sub-menu li a, .genesis-nav-menu.responsive-menu .sub-menu li a:hover { background: none; border: none; box-shadow: none; color: #444; padding: 12px 0; position: relative; width: 100%; } .genesis-nav-menu.responsive-menu { padding-bottom: 16px; } .nav-primary .genesis-nav-menu.responsive-menu li a { background: none; color: #000000; } .nav-primary .genesis-nav-menu.responsive-menu li a:hover { background: none; color: #e7e7e7; }
Thank you again!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.