[Resolved] Customizing Navigation

[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

[Tom]

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/

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

[Tom]

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

[Suke]

Thanks a lot Tom 🙂

[Tom]

You’re welcome 🙂

[Author]

Posts