[Resolved] Nav Button and styling sticky menu

[An Nguyen]

Hi All,

Nav-button works well when my logo is activated as default mode, but I want to center logo and apply hover effect by using these GP docs:

https://docs.generatepress.com/article/centering-logo-navigation/
https://docs.generatepress.com/article/adding-menu-hover-animation/

1/Now my button displays wrong position (next to border-top of main-nav).

2/ how can I remove hover affect on logo?

3/ how can I remove hover affect onnav.button ?

4/On my sticky menu, logo doesn’t not centre like main-nav. Can it be the same with main-nav?

[David]

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.

[An Nguyen]

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.

[David]

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

[An Nguyen]

It’s done, David.

[David]

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

[An Nguyen]

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.

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

[An Nguyen]

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.

[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?

[An Nguyen]

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

[Tom]

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

[An Nguyen]

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.

[David]

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

[An Nguyen]

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.

[Author]

Posts