Black Friday sale! Get up to 25% off GP Premium! Learn more ➝

[Resolved] Customizing Navigation

Home Forums Support [Resolved] Customizing Navigation

Home Forums Support Customizing Navigation

  • This topic has 5 replies, 2 voices, and was last updated 6 years ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #430299

    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 >
    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 :
    3. How to hanging Link position to the middle, move “close” to right, and also have hover effect (same with,
    Here is the example >


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


    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

    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 >
    I named “before” what I can do right now and “after” what I need to change.

    Lead Developer
    Lead Developer

    1. Try this:

    @media (max-width: 768px) {
        .mobile-header-logo .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;

    Thanks a lot 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.