- This topic has 7 replies, 2 voices, and was last updated 6 years, 6 months ago by
Tom.
-
AuthorPosts
-
June 27, 2016 at 1:29 pm #204954
Mark
Hi Tom, thanks again for helping with the last issue.
I’ve still got the site up at http://107.170.67.198.
The issue that I’m having now is that I followed some advice from this forum to add social icons to the right side of the menu. The issue is that now it doesn’t wrap to the responsive mode’s properly, waiting till the left side content is pushed before properly transitioning. Any ideas? Thanks again for the help!
June 27, 2016 at 6:07 pm #204991Mark
I think I have a working fix for now, I found it in another thread. I want to think there is a better way to do this, but if this is the only way then it works for me.
@media (max-width: 1000px) { .menu-toggle, .main-navigation.toggled .main-nav > ul { display: block; } .main-navigation ul li.sfHover > ul { display: none; } button.menu-toggle { background-color: transparent; width: 100%; border: 0; } button.menu-toggle:hover, button.menu-toggle:active, button.menu-toggle:focus { background-color: transparent; border: 0; outline: 0; } .sub-menu.toggled-on, .children.toggled-on { display: block !important; opacity: 1 !important; } .dropdown-menu-toggle:before { content: "\f107" !important; } .sfHover > a .dropdown-menu-toggle:before { content: "\f106" !important; } .main-navigation ul { display: none; } .nav-float-right .main-navigation, .nav-float-left .main-navigation { float: none; margin-bottom:20px; } .navigation-search { bottom: auto; top: 0; } .mobile-bar-items { display: block; position: absolute; right: 0; top: 0; z-index: 21; list-style-type: none; } .mobile-bar-items a { display: inline-block; } .main-navigation .menu li.search-item { display: none !important; } li.search-item a { padding-left: 20px; padding-right: 20px; } .menu-toggle { text-align: center; } .nav-search-enabled .main-navigation .menu-toggle { text-align: left; } .main-nav .sf-menu > li { float: none; clear: both; } .nav-aligned-right.nav-below-header .main-navigation .sf-menu > li, .nav-aligned-right.nav-above-header .main-navigation .sf-menu > li, .nav-aligned-center.nav-below-header .main-navigation .sf-menu > li, .nav-aligned-center.nav-above-header .main-navigation .sf-menu > li { display: block; margin: 0; text-align: left; } .main-navigation .main-nav ul ul { position: relative; top: 0; left: 0; width: 100%; } .menu-item-has-children .dropdown-menu-toggle { float: right; } .main-navigation { text-align:left; } .navigation-search, .navigation-search input { width: 100%; max-width: 100%; } }
June 27, 2016 at 6:14 pm #204992Mark
Yeah, it works fine until you scroll down, but then the pull down menu is broken. See the screen shot for what I mean.
June 27, 2016 at 11:21 pm #205011Tom
Lead DeveloperLead DeveloperHave you tried giving the social icons a class of:
menu-item-float-right
That, instead of your
social_icon
class should work a lot better.Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 28, 2016 at 2:55 am #205049Mark
I cleared the other fix I found and just applied
menu-item-float-right
and while it did the function of the other class, I still have the issue of it wrapping to a new line.Here is what it looks like just before it switches to a mobile format:
June 28, 2016 at 8:28 am #205107Tom
Lead DeveloperLead DeveloperAh, one thing you can try is reducing the font size and left/right padding once you hit that width.
For example (taken from this site):
@media (max-width: 880px) and (min-width: 769px) { .main-navigation ul li a { padding: 0 10px!important; font-size: 14px; } }
Replace 880px with whatever width the wrapping begins at, and it should help π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 5, 2016 at 2:34 pm #206791Mark
Ok, that should work fine, thanks! I just wasn’t sure if there was a way to have it not be hard coded in.
Thanks for the help!
July 5, 2016 at 11:39 pm #206876Tom
Lead DeveloperLead DeveloperYou’re welcome π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.