Ethos - Hamburger Menu Question

Support
#1

Support.

Is it possible to place a hamburger menu on the desktop version of the site, instead of the standard menu bar?

https://www,bestofretro.com

Thanks
DC

#2

Hello DC,

Thanks for writing in!

Do you want to display your mobile menu icon in desktop screens like this?

If that is what you have in mind, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media (min-width: 980px){
    .masthead-stacked .x-btn-navbar {
        display: inline-block;
    }

    .masthead-stacked .x-navbar{
        text-align: center;
    }
    
    .x-nav-wrap.desktop,
    .x-nav-wrap.mobile.x-collapsed {
        display: none;
    } 

    .x-nav-wrap.mobile {
        display: block;
    }
}

We would love to know if this has worked for you. Thank you.

#3

That works great. How do I removed the top and bottom margins of the navbar?

Thanks
DC

#4

Hello DC,

Thanks for updating the thread. :slight_smile:

Please add following CSS under X > Theme Options > CSS:

.x-navbar-inner {
    min-height: 0px;
}

.masthead-stacked .x-btn-navbar {
    margin-top: 0 !important;
}

.x-navbar-inner .x-container.max.width {
    line-height: 0 !important;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#5

I have the following code in custom CSS

.x-navbar {
border-top: 3px solid #D3D3D3;
border-bottom: 3px solid #D3D3D3;
}

When I add your code it does not remove the border but does push the hamburger menu up slightly.

Thanks
DC

#6

Hello David,

If you want to remove the border, you will need to use this code:

.x-navbar {
    border: none;
}

We would love to know if this has worked for you. Thank you.

#7

Thanks for the update; however, after adding the CSS and removing my other code there is no change to the navbar border. Is there any cache I should clear?

Any other advice welcome.

Thanks
David

#8

Here is my added CSS for the site.

.x-navbar {
background-color: White;
}
.single-post .x-post-carousel {
display:none;
}
.x-btn-navbar {
margin-top: 10px !important;
color: Black !important;
}
.x-sidebar {
background-color: White;
}
.x-navbar {
border-top: 3px solid #D3D3D3;
border-bottom: 3px solid #D3D3D3;
}
.x-post-carousel {
margin-top: 32px !important;
}
.page .x-main.left .hentry .entry-featured,
.single-post .x-main.left .hentry .entry-featured {
margin-top: 0px;
}
body p {
margin: 0 0 10px;
}
.blog h2.entry-title {
text-transform: none;
}
@media (min-width: 980px){
.masthead-stacked .x-btn-navbar {
display: inline-block;
}

.masthead-stacked .x-navbar{
    text-align: center;
}

.x-nav-wrap.desktop,
.x-nav-wrap.mobile.x-collapsed {
    display: none;
} 

.x-nav-wrap.mobile {
    display: block;
}

}

#9

Hi David,

The code is correct. The space you see between the lower part of the Navbar border and the carousel is caused by the code below that you have on your website:

.x-post-carousel {
    margin-top: 32px !important;
}

Change the value to make sure you have the correct positioning.

Please consider that delving into such CSS small changes is outside of our support scope. Here are some good resources that you can help you on the matter:

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thank you.

#10

Thanks for your reply, However, when I remove the code specified or update there is no change.

Thanks for the references. Can you assist further.

DC

#11

Hello David,

After making and saving your changes, since you have installed a caching plugin W3 Total Cache, please clear your plugin cache and regenerate the minified JS/CSS files before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

If nothing is helping, please provide us your WP credentials in a secure note when you reply so that we can investigate further. To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Please let us know how it goes.

#12

Hi David,

Thank you for the credentials, this is the code reference by Christopher above.

I see its not remove and unchanged, I did go ahead and commented it out and that get rid of the space below navbar and above carousel.

Please clear your browser’s cache on your end.

Cheers,

#13

Many thanks that resolved the issue. Also commented out the navbar border.

Many thanks for all your patience and help.

DC

#14

We are gratified that we’re able to help you with this,

Cheers!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.