possible layout?

Did you use the exact code that was provided on 2. above?

To move it to the left of the logo, change the Hook Priority to 5.

hi David,

i used the same code just now, and i changed the priority to 5 but menu remains on the right side of the 'tony' title.

Can you share a screen shot of the hook element - as its not outputting the span HTML

hi David,

https://ibb.co/374L251

david,

use temp login if it helps.

david,

i don't mean to rush you guys, and i understand you guys are busy, but are you able to look at my issue please? thanks very much:)

i don’t mean to rush you guys, and i understand you guys are busy, but are you able to look at my issue please? thanks very much:)

We answer every reply within 12-24 hours:
https://generatepress.com/what-support-includes/

I see that most of your reply came within 1 hour so your patience is appreciated when we are a bit slower :)

I just checked the element and I'm seeing priority 11:
https://www.screencast.com/t/COFvUErA3C2e

Thanks Leo,

Ive been playing around with the priority and i did have set to 5 but nothing changes hence why i put 11 to see if any changes occur…

What if you try priority 2?

priority 2 seems to work, how do i change the colour of the hamburger menu to black #000000? also on hover to be #999999?

also, to place the navigation items in the centre and the search icon on the right....

thank you v much.:)

The colors are set in Customizer > Colors > Header link colors.

To center the menu items, try this CSS:

.nav-float-right #site-navigation {
    margin-left: unset;
    flex: 1;
}

just added the css above, but the menu items moved too far to the left, not sure why.

also i found css you wrote on a previous ticket...

#generate-slideout-menu .slideout-menu li {
border-top: 1px solid #ccc;
}

#generate-slideout-menu .slideout-menu li:last-child {
border-bottom: 1px solid #ccc;
}

.slideout-navigation .menu-item-has-children .dropdown-menu-toggle {
background-color: #ccc;
padding-left: 20px;
}

#generate-slideout-menu .inside-navigation {
padding-left: 10px;
padding-right: 10px;
}

this added bottom border and top border to menu items on the off canvas menu... separates the menu items nicely i think...

also i need to know how to add sub menu items on the off canvas menu so when i click it appears in smaller font like the https://www.apetogentleman.com/

also, can we move my site logo slightly off to the right like the website as well...

thank you guys for your time and patience...i appreciate your time:)

Ah ok now add this CSS:

.main-navigation:not(.slideout-navigation) .main-nav {
    margin: auto;
}

Logo positioning you can give the H1 some padding like so:

#generate-slideout-menu .inside-navigation h1 {
    padding: 10px 20px 0;
}

I am not seeing any sub menus on the off canvas ?

hi David,

the css worked just fine.

1. how can i move my site logo "TONY" slightly to the right? like the example of the apetogentleman.com website

2. i've added the sum menu items...i need them to be same if not similar to the apetogentleman.com website if possible. they shouldn't inherit the style of the menu items, but be smaller in font size i.e. 14px and 400 weight etc.

3. also, when hovering over the menu items on off canvas menu...the arrow appears on the right if you see the example on the website apeto.....is it possible to have the same or something similar?

4. ...and adding the social icons at the bottom of the off canvas menu, with the bottom border spanning across the off canvas menu completely.

5. i would like the layout to look exactly the same on mobile view with the toggle left and site logo and search button on the right...on tablet - the site logo to be in the middle with menu toggle left and search on the right. possible?

thanks a lot.:)

1. You can give the site logo some left margin:

@media(min-width: 1024px) {
    .site-logo {
        margin-left: 40px;
    }
}

NOTE - i wrapped that in a media query which you will need to adjust.

2. Off Canvas sub menu items:

.slideout-navigation.main-navigation .main-nav ul ul li a {
    font-size: 14px;
    font-weight: 400;
}

3. Try this CSS:

.slideout-navigation.main-navigation .main-nav ul ul li a:after {
    content: '\2192';
    position: absolute;
    right: 40px;
    opacity: 0;
    transition: all 0.3s;
}
.slideout-navigation.main-navigation .main-nav ul ul li:hover a:after {
    opacity: 1;
    transform: translatex(15px); 
}

4. You can either use the Off Canvas Widget area for the Social Icons or theres the generate_after_slideout_navigation hook thats also below the nav, so you could use Block Element in there.

5. Can you first change the Navigation Drop Point in Customizer > Layout > Primary Navigation to NULL ( ie. delete any value in there ), then i can take a look.