Aligning Mobile Version: Social Media Buttons and Newsletter Signs-up

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

Hi 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 Tay

1. 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;
}

Hi 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

So 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;
}

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

Try this CSS:

.slideout-navigation .inside-navigation .slideout-widget.widget_nav_menu {
    margin-bottom: 5px;
}

thanks!

You're welcome

Hi 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

Hi 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! :)

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

Hi 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%;
}

thank you David. good to hear from you again!