- This topic has 15 replies, 3 voices, and was last updated 4 years, 4 months ago by David.
-
AuthorPosts
-
October 14, 2019 at 3:30 am #1034025WAYNE
Hi there,
I have some alignment issues on mobile.
1. How can I aligned my social media buttons in a straight line in mobile version?
2. I would like my newsletter sign up section to appear on the menu in mobile version.October 14, 2019 at 6:28 am #1034151DavidStaffCustomer SupportHi there,
i would suggest using the Off Canvas Panel for your mobile menu:
https://docs.generatepress.com/article/off-canvas-panel-overview/
It has its own Widget Area so you can add the social icons there and the sign up form.
For the social icons use a plugin like Tom’s Lightweight Social Icons you can then use that in the Site Header and remove them from the Menus.
October 23, 2019 at 4:56 am #1042118WAYNEHi David,
Thanks for that, I managed to use the Off Canvas Panel to resolve this problem, but it creates another problem. I believe it is simple for you. So that I am incapable for handling this minor issue. ;(
1) On the Desktop version, how can I get the “Social-Sider” back on the menu navigation. It is missing now, comparing to the default theme.
2) On the mobile version, how can I insert a line break between “About Us” and “Contact Us”
3) How do I increase the font size of the Off Canvas Panel in my mobile version for “Primary – Sider”, “Social-Sider”, “Newsletter” without affecting Desktop version’s font size?
my website: http://www.waynetay.com
Yours sincerely
Wayne TayOctober 23, 2019 at 6:42 am #1042170DavidStaffCustomer Support1. You can add a Nav Widget for the Social Sider Menu to the Header Widget.2
2. Customizer > Layout > Off Canvas Panel and increase the Menu Item Height.
3. Customizer > Typography > Off Canvas Panel and increase the font size.
Note there are shortcuts in the Customizer so when in Layout there is a shortcut to Typography for that element.
To increase the widget title – this CSS:
.slideout-navigation h2.widget-title { font-size: 20px; }
October 23, 2019 at 7:15 pm #1042924WAYNEHi David,
Thanks for the support, you are wonderful.
Unfortunately, item 2 and 3 did not really work out for me except for the widget title. To circumvent this issue, I actually increase the padding for top and bottom to create spacing between “ABOUT” and “CONTACT ME” using
.main-navigation a { padding-top: 10px; padding-bottom: 10px; }
Now, how can I make the social media icons in a straight line instead only in the mobile version? Thanks so much.
website: http://www.waynetay.com
October 24, 2019 at 4:09 am #1043140DavidStaffCustomer SupportSo edit this CSS:
#menu-social-sider li { display: inline-block; margin: 0 10px; }
to this:
#menu-social-sider li, #menu-social-sider-1 li { display: inline-block; margin: 0 10px; }
October 30, 2019 at 3:48 am #1048558WAYNEHi David,
Thanks a lot! It’s works!
In the mobile version of my website, how do I shorten the white space between “Contact Me” and “Social Media Icon”?
Thanks.
October 30, 2019 at 6:14 am #1048672DavidStaffCustomer SupportTry this CSS:
.slideout-navigation .inside-navigation .slideout-widget.widget_nav_menu { margin-bottom: 5px; }
October 30, 2019 at 7:51 am #1048870WAYNEthanks!
October 30, 2019 at 7:53 am #1048878DavidStaffCustomer SupportYou’re welcome
November 1, 2019 at 1:26 am #1050270WAYNEHi David,
Good day to you.
Can you teach me how can I do these:
1) Desktop version: social media icon menu hover color to be: #0054c9
2) Mobile version: every menu item “on click” color to be: #0054c9
3) mobile version: how do I remove the fine black line on the “subscribe” button on iOS safari browser
November 1, 2019 at 9:39 am #1050670TomLead DeveloperLead DeveloperHi there,
1.
#menu-social-sider a:hover { color: #0054c9; }
2.
@media (max-width: 768px) { .site-header .main-navigation a:active, .site-header .main-navigation a:focus { color: #0054c9; } }
3.
.mc4wp-form-fields input[type="submit"] { border: 0; }
Hope this helps! 🙂
November 11, 2019 at 11:31 pm #1060139WAYNEHi Tom,
Thanks a lot!
In my article page: http://waynetay.com/uncategorized/dont-just-do-your-job-own-your-job/
There’s a small dash “-” in between the title of the post and the 1st paragraph of my article.
How do I:
1) remove the dash
2) shift the starting paragraph to the area where the dash is.Thank you.
November 12, 2019 at 4:10 am #1060290DavidStaffCustomer SupportHi there,
in Customizer > Additional CSS remove this:
.single .entry-header::after, .page .entry-header::after{ border-bottom: 1px solid #000; content: ""; display: block; margin-bottom: 40px; padding-bottom: 40px; width: 2.5%; }
November 12, 2019 at 11:49 pm #1061370WAYNEthank you David. good to hear from you again!
-
AuthorPosts
- You must be logged in to reply to this topic.