Canvas Support

How to make responsive menu (mobile hamburger) appear in all viewport sizes

4 replies · opened Jan 24, 2019

JJgregJan 24, 2019

I want a simple interface without the image/search header section at the top in all devices.

Like you see in the image

I'd prefer remove the elements from the page, but a CSS fix is okay with me

Thanks,
Jan Gregory

JJgregJan 24, 2019

Starting with the demo page listing.html in real estate demo
I got what I wanted by adding .dark class and removing top links html code

However, there are faint white lines separating the Logo DIV and the area on top menu after the last menu item
See screen shot. They are faint but still there when I view on 27 Inch monitor

When page goes into REsponsive Menu mode (smaller window size) the Hamburger displays and faint lines disappear

Here's the code <header id="header" class="full-header dark">
and I also added the dark logo code

This is the same menu code I started with
<!-- Primary Navigation
============================================= -->
<nav id="primary-menu" class="with-arrows">

so no other changes to listing.html except removing the slider element section

JJgregJan 24, 2019

I'd also like to add a Button to the Top Menu. I tried adding the button code as you see below.
See screenshot

Button does appear.

Is there anyway I can get it centered between Top and Bottom of the menu area?

				&lt;div id="primary-menu-trigger"&gt;&lt;i class="icon-reorder"&gt;&lt;/i&gt; &lt;/div&gt;
				[Send Text](#)
JJgregJan 24, 2019

By the way, I would do a better job here if this Forum would allow me to EDIT the topic.
I am a purchaser and logged in here to this Forum with my Envato User/Pass

I can create these replies, but every time I click EDIT link for my previous Reply I get this error message

You do not have a License for Reply To: How to make responsive menu (mobile hamburger) appear in all viewport sizes to Add New Replies. Please Purchase or Renew your License.

SSemicolon WebSTAFFJan 27, 2019

Hello,

  1. To remove the Lines from the Menus, please use the following CSS Code:
#header.full-header #logo,
#header.full-header #primary-menu > ul { border-right: 0; }
  1. Please use this Template to add a Button to the Header: https://www.dropbox.com/s/eoskdcokp8srzb3/header-purchase-button.html?dl=1 .

We Apologize about the Inconveniences regarding not being able to Edit the Replies. We will make this workable soon.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard