Nav Button and styling sticky menu

Hi there,

1. Edit this CSS and add the extra property i have commented:

.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav>ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center; /* Add this property */
}

2. and 3. Add this CSS:

.main-navigation .menu>.menu-item.menu-item-separator>a:after,
.main-navigation .menu>.menu-item.nav-button-main>a:after {
    display: none;
}

4. If you can flush and disable Autoptimize i can take a look at the CSS effecting this.

Hi David,

I forgot to turn off autoptimize. I'm sorry for that. Your code works perfect! 1,2,3 are solved! Waiting for number 4.

In sticky-menu, can we have the same hover effect on it like main nav, David?

Thanks
An.

Can you remove the Sticky Navigation logo in Customizer > Layout > Sticky Navigation?

It's done, David.

Looks like that resolved all of them. Might want to clear your browser cache or check it in an private browser.

Hi David,

You're right! It's solved. In cavas-off menu, can we have the same effect like main + sticky nav?

In sticky nav, we don't need to add logo in this case? I tried to add logo again it come back the issue on sticky nav, unless I remove it and everything is good.

Thanks David.

No need for the sticky nav logo in this case. By not having one it displays the Site Id Logo.
Off canvas menu - so you want the underline effect ? This won't be noticeable on a mobile device as there is no hover feature.

Hi David,

Could you suggest for me a good effect in this case good for desktop & mobile mode? I don't want hover change colour. It's so boring.

In this forum, I tried to search CSS detect for ipad, but I can't find. My site in ipad mode displays so many mistakes on landscape and portrait.

Thanks David.

The issue with Mobile is any effect you apply to a menu link will not be noticeable, at the very minimum you may see a slight change before it navigates to a new page.

Can you explain a little of the responsive issues you're having?

Hi David,

a/I've agreed with your view. I have no choice and come back with hover effects using changing colour.

b/In footer widget, I decide to use one widget in homepage and have four in other pages. However, when I tested with ipad devices mini, ipad 4, the margin between 4 widgets too narrow. Therefore, I wonder that can I increase the margin in ipad mode? or can I hide 1 of them? and can I set in homepage display widget 1 and other page display 2,3,4?

Thanks David

Does adding this CSS help?:

@media (max-width: 1024px) and (min-width: 768px) {
    .footer-widgets .footer-widget-1 {
        clear: none !important;
        float: none;
        width: 100%;
    }
}

Hi Tom,

It doesn't work. I tested on ipad4 and mini.

In homepage, the width of footer-Widget1 is too narrow to display full detail, contents overlap inside.

In other page, how can I hide footer-widget 1 and display only 2,3,4 in all modes?

Thanks Tom.

It looks like you have applied the CSS I provided here:

https://generatepress.com/forums/topic/custom-footer-without-premium/page/2/#post-1015744

But then you have this CSS which is setting the widgets to 33% wide on tablet, which is the problem:

@media (max-width: 1024px) and (min-width: 768px) {
    .footer-widgets .footer-widget-1,
    .footer-widgets .footer-widget-2,
    .footer-widgets .footer-widget-3 {
        clear: none !important;
        float: left;
        width: 33.3333%;
    }
}

Hi David,

You're right I used this because it can make my landing page lighter. I want that there is 1 full width-widget footer in homepage (widget1), and another 3 widgets layout in other pages and posts (widget 2,3,4).

1/How can I hide widget 1 and display 2,3,4 on other pages? widget 1 displays only on homepage (full width)

2/I got an issue about the margin of widget-1 in homepage when I access it from ipad mini. Your CSS code just make it narrow down in 33% without overlapping content. I want it displays full width in homepage like in desktop mode.

Thanks David.