[Resolved] Customizing Navigation

Home Forums Support [Resolved] Customizing Navigation

Home Forums Support Customizing Navigation

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #430299
    Suke

    Hi Support Team,
    I’ve just bought Premium but want to little modification on my Primary Navigation and Slideout Navigation, but I don’t have much skill on CSS πŸ™
    Could you please to solve this :

    1. Changing position on logo to center and hamburger menu to the left > http://prntscr.com/hdkg1l
    2. Also how to swipe the content to the right when the menu clicked?
    I just want to make the header and the Slideout effect like this : https://www.etq-amsterdam.com
    3. How to hanging Link position to the middle, move “close” to right, and also have hover effect (same with https://www.etq-amsterdam.com),
    Here is the example > http://prntscr.com/hdkm00

    Thanks

    #430373
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. Are you using the mobile header?

    2. Are you looking for the same sliding effect? Currently it’s not possible with our slide-out menu, but we’re going to be rebuilding it shortly to include this option.

    3. I can’t get your website to load currently, so it’s hard to see how far you’ve gotten so far.

    Right now, the slide-out menu in GP is in serious need of some love and options – it’s very simple. Have you considered a plugin like this for now?: https://en-ca.wordpress.org/plugins/shiftnav-responsive-mobile-menu/

    #430417
    Suke

    Hi Tom,
    1. I just using empty Primary Navigation
    and want to change location on hamburger menu from right to left
    also logo from left to center.

    2. I mean, I want to Sidenav push (off-canvas) like this example https://www.w3schools.com/howto/howto_js_sidenav.asp

    3. So far, I’ve already have close x (custom link) on slide out align with link menu.
    I want to change position of this custom link to near top right corner.
    Here I you can check from the image > http://prntscr.com/hdkm00
    I named “before” what I can do right now and “after” what I need to change.

    #431229
    Tom
    Lead Developer
    Lead Developer

    1. Try this:

    @media (max-width: 768px) {
        .mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
            float: left;
        }
    
        .mobile-header-navigation .site-logo {
            position: absolute;
            left: calc(50% - 40px); /* 50% from the left – half your image width */
        }
    }

    2. Currently not possible without a substantial amount of code, but is a planned feature in the near future.

    3. Try this:

    #generate-slideout-menu .slideout-menu > li.slider-exit {
        position: absolute;
        right: 0;
        top: 0;
        width: auto;
    }
    
    #generate-slideout-menu .slideout-menu > li.slider-exit + li {
        margin-top: 50px;
    }
    #432337
    Suke

    Thanks a lot Tom πŸ™‚

    #432842
    Tom
    Lead Developer
    Lead Developer

    You’re welcome πŸ™‚

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