[Resolved] Positioning Of Nav Bar Logo And Slide Out Menu

[Bobby]

Hi Tom,

Im trying to figure out how to customize the nav bar when the theme switches to mobile. Eventhough i know the theme is responsive and is designed to switch to the mobile version, I’m still using a mobile them switcher plugin for certain reasons. As a result, I’m customizing the theme strictly for how its going to look on mobile.

In this theme, Im not using the header space to host my logo…I’m using the nav bar to host my logo, slide out menu and search bar.

In the nav bar, I’m trying to arrange these three elements in a particular position.

Here’s what im trying to accomplish…I want the logo centered in the middle of nav bar, the slide out menu positioned on the left side and search icon/bar positioned on the right.

Note: I already have the search icon/bar positioned on the right..Im just trying to position the other two elements.

Thanks.

[Tom]

Hi Bobby,

Any chance you can link me to what you have so far? I should be able to help 🙂

[Bobby]

Hey Tom,

Sorry the delay. Before I try to accomplish this task above, first I’m trying to figure out how to show the navigation search on mobile. I have the nav search activated on the desktop version,,,but its not showing in the nav bar on mobile.

http://playerwags.com

Thanks.

[Tom]

Removing this line from your child theme style.css file will show the search on mobile (and fix other things):

@import url("../generatepress/style.css");

[Bobby]

Oh wow..that worked. Thanks Tom. Now, I guess Im back to my original question. LOL. I tried doing a float left with the slide out menu, but it will not float over the logo div. I tried a Position relative to the right with the logo, but again…it just moves the slide out menu over with it. SMH..Any help would be greatly appreciated.

Thanks.

[Tom]

Give this CSS a shot:

@media (max-width: 768px) {
    .site-logo.sticky-logo {
        position: absolute;
        left: calc( 50% - 90px); /* 50% from the left - half your image width */
    }

    button.menu-toggle {
        position: absolute;
        left: 0;
    }
}

[Bobby]

Hey Tom,

That code worked great. With me switching my slide out menu to the left, it covers up the “X” to close out the drop down menu//becaue the drop down menu by default open on the left. I decided to switch the drop down menu to the right….so the “X” would be able to close it out.

If anyone is having this same problem, you can use the code Tom provided below:

.slideout-navigation {
left: auto !important;
right: 0;
transform: translateX(100%) !important;
}

.slide-opened .slideout-navigation {
transform: translateX(0px) !important;
}

See here:
https://generatepress.com/forums/topic/reverse-flip-position-of-slideout-menu-right/

Thanks again Tom for all your help. Your customer service is awesome. Any new products you decide to create in the future, you can definitely count me in as a customer.

Take care.

[Tom]

Thanks for sharing your code!

Glad I was able to help 🙂

[Author]

Posts