- This topic has 33 replies, 3 voices, and was last updated 5 years, 9 months ago by David.
-
AuthorPosts
-
June 18, 2018 at 2:36 am #602460Richard
Hi!
I’d like for the social icons to stay responsive (in place as is) with no hamburger menu. Is this possible?
I tried this, but it didn’t work:
https://generatepress.com/forums/topic/possible-to-not-turn-nav-bar-into-a-button-on-mobile/#post-120858Thank you!
Best,
RichardJune 18, 2018 at 2:39 am #602463Richard(The icons I produced as fa icons in the menu as described here: https://docs.generatepress.com/article/adding-icons-to-menu-items/#floating-the-icon-to-the-right.
The hamburger menu I am using is TapTap.)
June 18, 2018 at 10:17 am #602857LeoStaffCustomer SupportHi there,
Hmm that code should still work.
How did you add it?
If you disable TapTap, does it work?
June 18, 2018 at 2:54 pm #603040RichardYes, I tried that. Added the code snippet and the css.
The icons in the primary menu still switch to mobile toggle.
I don’t know what else I could be doing wrong. I need to reactivate TapTap menu, since it’s a live site. 🙂
June 18, 2018 at 2:57 pm #603041RichardI tried a header widget for the social links, but that seems to disappear as well on mobile?
June 18, 2018 at 9:28 pm #603179LeoStaffCustomer SupportHmm there shouldn’t be any CSS needed.
Just tested the code and it worked for me still.
Hard to tell what the problem is if you can’t disable TapTap.
Do you have a test server you can try?
June 18, 2018 at 9:48 pm #603183RichardDeactivated! 🙂
June 18, 2018 at 9:50 pm #603184LeoStaffCustomer SupportCan you double check that the snippet is activated and not just saved?
June 18, 2018 at 9:54 pm #603185RichardI have run snippet everywhere checked.
June 19, 2018 at 6:23 am #603480DavidStaffCustomer SupportHi Richard, you can use the Header Widget for the social icons. However you will need to switch of the Mobile Header under Layout > Header for it to display on mobile.
June 19, 2018 at 7:24 am #603559RichardHi David,
I did that. It disappeared in Mobile view.
Basically, we need a header that changes color and logo in sticky mode, and the social icons stay put. We got this for the most part, except the hamburger keeps coming back. 🙂 we haven’t gotten to the logo bit.
Thanks!
July 9, 2018 at 11:36 am #619562RichardHi!
We are still having problems with this.
The sticky header is showing the hamburger in mobile view. We want this turned off, and the items of this menu to appear in the header instead (they are only icons).
This is our Additional CSS currently:
/*
You can add your own CSS here.Click the help icon above to learn more.
*/html, body {
max-width: 100% !important;
overflow-x: hidden !important;
}.site-info a:hover {
text-decoration: underline;
text-align: left !important
}.site-info {
text-align: left !important;
padding-left: 50px
}.taptap-by-bonfire ul li a {
line-height: 84px;
font-weight: 300;
}.entry-meta a, .entry-meta a:visited, .entry-meta {
display: none;
}.sticky-enabled .main-navigation.is_stuck {
background: #95a6ff;
box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}.sticky-enabled .main-navigation.is_stuck.main-navigation .main-nav ul li a, .menu-toggle {
color: #020202
}.sticky-enabled .main-navigation.is_stuck.main-navigation .main-nav ul li a:hover, .menu-toggle {
color: #fff
}.site-logo {
margin-left: 240px
}/* Landscape tablet and below */
@media (max-width: 1024px) {
.inside-footer-widgets > div {
margin-bottom: 50px;
}.active-footer-widgets-1 .footer-widget-1,
.active-footer-widgets-3 .footer-widget-3,
.active-footer-widgets-5 .footer-widget-5 {
width: 100%;
}
}/* Portrait tablet and below */
@media (max-width: 768px) {
.sidebar,
.content-area {
float: none;
width: 100%;
}.site-main {
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
}
.fluid-header .inside-header {
text-align: center;
}.header-widget {
float: none;
max-width: 100%;
text-align: center;
}.navigation-search,
.navigation-search input {
width: 100%;
max-width: 100%;
}.main-navigation li.search-item {
z-index: 19;
}.main-navigation li.search-item .fa-times {
text-indent: -9999px;
}
.alignleft,
.alignright {
float: none;
display: block;
margin-left: 0;
margin-right: 0;
}
.main-navigation li.search-item.current-menu-item {
position: relative !important;
right: auto;
}.post-image-aligned-left .post-image,
.post-image-aligned-right .post-image {
float: none;
margin: 2em 0;
text-align: center;
}.site-info {
padding-left: 10px;
padding-right: 10px;
}
}Thanks!
Best,
RichardJuly 9, 2018 at 2:11 pm #619659DavidStaffCustomer SupportHi Richard,
i think we need a fresh start maybe. I am thinking you ditch the menu containing the social icons. We create a blank menu and assign this to the primary navigation. Disable the mobile header. And we hook the social icons into the navigation like so:
add_action( 'generate_inside_navigation','db_inside_navigation_html' ); function db_inside_navigation_html() { ?> <div class="social-icon-wrap"> <span class="social-icons"> <a target="_blank" href="mailto:hello@christopherwaldner.com"><i class="fa fa-envelope"></i>D</a> <a target="_blank" href="https://www.linkedin.com/in/christopherwaldner/"><i class="fa fa-linkedin"></i>A</a> <a target="_blank" href="https://www.xing.com/profile/Christopher_Waldner/cv"><i class="fa fa-xing"></i>B</a> <a target="_blank" href="https://www.slideshare.net/christopherwaldner1"><i class="fa fa-slideshare"></i>C</a> </span> </div> <?php }
Then we can target the social icon span and inline them and hide the mobile toggle:
.social-icon-wrap .social-icons a { display: inline; } .menu-toggle { display: none !important; }
then its just a case of adjusting for the site logo.
Any good?
July 9, 2018 at 2:41 pm #619677RichardHi David,
thanks for your reply.
Is there anything we can delete then from the current CSS?
And the function php in Code Snippets?
I’ll check this tomorrow.
Thanks!
RichardJuly 9, 2018 at 2:46 pm #619681DavidStaffCustomer SupportProbably anything with the menu-toggle and the header-widget as we won’t need them. Of course worth just commenting them out.
Yep you can use Code Snippets for that!
-
AuthorPosts
- You must be logged in to reply to this topic.