Full Menu on Mobile

Activello
1

Hello

Can you give me the code to make the header menu show on a mobile as it does on a desktop rather than a hamburger menu?

I found one code on the forum but it made the menu disappear on a mobile.

Thank you,
Lucy

2

Hi,

That is unfortunately not possible. :frowning:

Let us know if you have any other questions,

Thanks,
laranz.

3

It can be done, I am just struggling to find the right code.

Something like this…

/** hide nav menu icon on mobile **/
.top-bar, .middle-bar, .bottom-bar {
display:none !important;
}
label.mobile-nav-toggle-label.fixed-nav-toggle-label {
display:none !important;
}

4

Hello there,

I hope you are doing well today.

You can use the following CSS code to have the menu appear on mobile but the theme was not designed to control the worded menu on mobile devices by going to Appearance > Customize > Additional CSS and pasting it there.


/*Display the menu as it is on desktop for mobile*/
@media (max-width: 768px)
.navbar-toggle {
    display: none;
}
@media (max-width: 768px)
.navbar-collapse.collapse {
    display: block !important;
}

If this does not work then you would need to enlist the aid of a third party developer to make the menu changes. You can contact on here:
https://colorlib.com/out/envatostudio

Best Regards,
Support

5

Thank you, I tried this but it has two errors showing.

6

Hi,

What exactly is the error? Also, it is not a good idea to keep the desktop menu on the mobile too, because it is very hard for users to navigate to the menu, just my thought.

Let us know,

Thanks,
laranz.

7

Hi Laranz

There are only four items on the menu so I think it will be okay to navigate from a mobile.

Please find attached a screenshot of the errors when the code in added in Additional CSS.

Thank you,
Lucy

8

Hi there

You have to add { } signs, please see attached screenshot i have added them with red color

9

Thank you, I added the following but it cut off the logo image…

/Display the menu as it is on desktop for mobile/
@media (max-width: 768px) {
.navbar-toggle {
display: none; }
}
@media (max-width: 768px) {
.navbar-collapse.collapse {
display: block !important;
}
}

Is there a way to have it show as it does on the desktop, above the logo and at the same height as the desktop header menu?

Secondly, if I take your advice to leave the hamburger menu, is there a way to centre it - currently it shows on the top left of the screen? Thank you.

10

Hello there,

I hope you are doing well today.

Could you please provide a link to your website so that I can inspect it with the changes that you have made?

Best Regards,
Support

11

Thank you, it’s www.enzodimarino.com

12

Hi,

Please add this Custom CSS in Appearance -> Customize -> Additional CSS,

@media only screen 
  and (max-width: 480px) {
.navbar-default .navbar-toggle {
    left: 126px;
}
}

Let us know,

Thanks,
laranz.

13

Hi Laranz

Thank you. It shows the following errors…

14

Where do we write our requests?

15

How can I watch Activello tutorials with sound and a screen that is not blurry?
It is difficult to set up widgets and social links when I can’t read or hear the tutorial screen. Very frustrating. Please advise. Thank you.
[email protected]

16

Hi there

lucydm please provide full code in text mode here and i will check, i cant see full code because of messages on the screen

@ericsonk please open a new ticket, we can assist more than 2 customers in the same ticket and when the ticket is too long, opening a new ticket i easy, just open this link: https://colorlibsupport.com/ then choose your theme and at the bottom of the page you will see form for opening ticket

17

Hi Noda

The code is as Laranz wrote above:

@media only screen
and (max-width: 480px) {
.navbar-default .navbar-toggle {
left: 126px;
}
}

Thank you,
Lucy

18

Hello,

I hope you are doing well today.

Could you please provide us with a username and password so that we can have a look at the CSS that was added?
Please mark the reply as private.

Best Regards,
Support