[Resolved] Nav Button and styling sticky menu

Home Forums Support Nav Button and styling sticky menu

Viewing 15 posts - 1 through 15 (of 33 total)
  • Author
    Posts
  • #1015623
    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?

    #1015792
    David
    Staff
    Customer Support

    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.

    #1015798
    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.

    #1015800
    David
    Staff
    Customer Support

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

    #1015801
    An Nguyen

    It’s done, David.

    #1015803
    David
    Staff
    Customer Support

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

    #1015805
    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.

    #1015819
    David
    Staff
    Customer Support

    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.

    #1015825
    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.

    #1016192
    David
    Staff
    Customer Support

    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?

    #1016782
    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

    #1017136
    Tom
    Lead Developer
    Lead Developer

    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%;
        }
    }
    #1017167
    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.

    #1017472
    David
    Staff
    Customer Support

    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%;
        }
    }
    #1017485
    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.

Viewing 15 posts - 1 through 15 (of 33 total)
  • You must be logged in to reply to this topic.