Announcement

Collapse
No announcement yet.

Mobile Menu Full Screen Width CSS

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Mobile Menu Full Screen Width CSS

    Hi Everyone,

    Full Width Mobile Menu
    Here is some CSS code I figured out (see below) that changes the mobile menu in vBulletin 5 to display full screen width.

    Default Width
    Normally the mobile menu width in VBulletin 5.x only extends to the longest menu text entry.

    Value of Mod
    The value of this modification is to allow for an improved visual & selection (tap target) experience for mobile users (on phones/tablets). Additionally for us, to match up the vBulletin mobile menu with our integrated membership system (sharing this menu), that displays full screen width. Visually matching the menus makes for a better, more seamless visual transition, when moving from one system to the other.

    Default Mobile Menu - Width as wide as the longest menu text

    Click image for larger version  Name:	mobile-menu-narrow-width.png Views:	0 Size:	65.9 KB ID:	4439167

    Customized: Full Width Mobile Menu - 100% of parent div

    Click image for larger version  Name:	mobile-menu-full-width.png Views:	0 Size:	35.3 KB ID:	4439168

    CSS Code Modifications

    Stretch Dropdown Menu Full Width

    Code:
    .b-comp-menu-dropdown {
         width: 100%; /* Stretch drop down menu width horizontally to full screen width */
    }
    Position Hamburger (Mobile) Menu using Static rather than Absolute Position
    Code:
    .b-comp-menu-dropdown__trigger--icon-trigger .b-comp-menu-dropdown__trigger-icon {
        position: static; /* Hamburger position changed due to 100% mobile menu width */
        margin-left: 10px;
        margin-top: 14px;
    }
    Depending on the height of your menu bar you may need to tweak the top & left margin settings to vertically center the menu in the menu bar.

    If you left the hamburger mobile menu position using Absolute it would center in the menu bar. Static position corrects this and puts the menu back in the left hand side, regardless of varying screen widths (phone / tablets).

    Hope this mod helps someone.

    Aly

Related Topics

Collapse

Working...
X