Mobile Button (Burger Menu) next to Logo and without Navbar

[LeonNielsen]

Hey Guys.!
As you can see on the attached picture, I would like to move the burger menu to be next to the logo.
Also, in mobile view I don’t want to see the empty Navbar section, it would be great if it unrolls when menu button is pressed.

I have added this in my CSS in X Theme Options

.x-logobar {
text-align: left;
max-width: 85%;
}
.x-navbar {
background-color: #343434;
}
.x-btn-navbar {
margin-left: 92%;
margin-top:10px;
}

I have googled for over 1,5h to figure it out, but all solutions I found were outdated or not fitting to my theme.
It is X theme Agency Integrity.

Would you be kind and assist me with that issue?

[prakash_s]

Hello David,

Thanks for writing to us.

To align the menu with the logo you need to add this custom CSS code under X-->Theme Option -->CSS

@media only screen and (max-width: 979px){
a#x-btn-navbar {
position: absolute;
top: -68px;
right: -6%;
width: 112px;
}
.x-navbar-inner {
min-height: 0;
}
.x-logobar {
    text-align: left;
    max-width: 75%;
}
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.
Responsive - Media Queries https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Hope It Helps
Thanks

[LeonNielsen]

Thank you very much @PrakashS

Little modification to the code helped to set it properly.
Now, I’m finally getting closer to final product.

I don’t want to open extra topic, so I’ll ask here.
How can I add a line that is not constraint by the width of page? I want to add a red line just under the browser addres panel that goes through full width of the screen, approximately 2px, that doesn’t follow the scroll.

Thank you upfront.

[prakash_s]

Hello David,

It seems that you have already set a red line under the browser address panel.

I checked your site it seems that you have set the red border width 5px if you want to change it to 2px please change your border width to 2px from 5px.

Thanks

[LeonNielsen]

Hello there again @PrakashS

Thank you for help, but I took your advice and used the browser element inspector and quick css code to set it as I wanted

All in all, you guys have amazing support!
I’m definitely recommending you to all people in my circles!.

[LeonNielsen]

Now that I’m 90% done with design, I got stuck on setting up WooCommerce page.
I want it to look like here
new.fmj.dk/test_shop
instead of new.fmj.dk/shop/
but as soon as I set in WooCommerce shop page to test_shop it overwrites the content and is removing my categories menu. It seems like WooCommerce can’t be edited with cornerstone or by wordpress editor.

As far as I understand, I have to edit it in functions.php of child theme, is that correct?
Or is there some cool tricks to add it with jQuery or something?

[tristup]

Hi David,

Shop page is a WooCommerce reserved page and rendered with the specific shortcode and contents. And it will override the content if anything is added previously.
Currently, it’s not recommended to edit WooCommerce reserved pages through the builder due to hook conflict. I would recommend using the standard editor (WordPress editor) for WooCommerce reserved pages.

Hope it helps.
Thanks