Navigation on Mobile and Other Smaller Devices

Support
#1

Hello, I have two websites -

  1. The first is the main one and the navigation three horozintal bars are scaled correctly, the second is a subsite of which the three horozontal bars are scaled too large. Using the same css code on both, it is showing differently? I would like the subsite to match the main sire.

  2. Is there a way for the bars to stay at the top when scrolling down on smaller devices?

  3. Can the word MENU be added next to the bars or instead of the bars? Some users do not understand that the bars are the navigation icon.

#2

Hi Samantha,

Thanks for reaching out.

  1. I checked and they have different CSS, this is on main site
.x-btn-navbar, .x-btn-navbar.collapsed {
    font-size: 24px;
}

and this is on sub site

.x-btn-navbar, .x-btn-navbar.collapsed {
    font-size: 60px;
}

Please change it to 24px too.

  1. Sure, please add this CSS too along with your other custom CSS.
.x-navbar-fixed-top {
    position: fixed !important;
}
  1. Sure, please add this CSS as well.
.x-btn-navbar i:before {
content : 'MENU';
}

Hope these help :slight_smile:

#3

Your response by far was the most detailed and well written response I have ever received on my help posts - thank you!

May I ask a few follow up questions. Is there a way to change the font for the “MENU” wording on the mobile navigation? Also, is there a way to change the size so that it is slightly smaller? Lastly can you still have the three bars and the word MENU next to it, or can it only one or the other?

Thank you again in advance!

#4

Hi Samantha,

Thanks for writing in!

  1. To change the font and font size of the Menu text please replace the number 3 CSS given bt @Rad with this CSS.
.x-btn-navbar i:before {
content : 'MENU';
font-family: sans-serif; /* you can change the  font family name */
font-size: 18px;  /* you can change the  font size */
}
  1. You can add the text right to the three lines via CSS, not to the left. To add text to the right of the three lines please use this CSS and remove the above CSS.
.x-btn-navbar i:after {
    content: 'MENU';
    font-family: sans-serif;
    padding-left: 10px;
}

Hope this helps!

#5

What about if I want to have the three lines to the left of the word MENU and also change the font and size, is it an either or situation?

#6

Hey Samantha,

Nope, you just need to target the proper selectors in the theme. The previously given code replaces the icon. You can replace this code:

.x-btn-navbar i:after {
    content: 'MENU';
    font-family: sans-serif;
    padding-left: 10px;
}

with this:

.x-btn-navbar:before {
    content: "MENU ";
    font-size:1.2em;
}

Hope that helps.

#7

Thank you!

#8

You’re welcome :slight_smile:

#9

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