Loading...
 
Skip to main content

Header navbar, Module menu; The navbar positioning is not good (broken for mobile device)

  • Tracker item actions
Trackers
Items
Status
Open
Subject
Header navbar, Module menu; The navbar positioning is not good (broken for mobile device)
Version
25.x
Regression from 24.x to 25.x
Category
  • Regression
Feature
Menu
Modules
UI / UX (User interface and experience)
Resolution status
Confirmed
Submitted by
Bernard Sfez / Tiki Specialist
Volunteered to solve
Gary Cunningham-Lee
Lastmod by
Bernard Sfez / Tiki Specialist
Rating
(0)
Description

On Tiki25 using the bootstrap classic layout and default theme the topbar, navbar menu placed after a logo the result is not good. The "Fixed-top navbar height" HAS to be set with some minimal value (not set by default).

Worst on mobile... Check the instance.

Tiki doesn't meet standard expectation IMO, it was "ok" on Tiki24.

On desktop:
Image

On mobile:
Image
Image

Solution

My quick and temporary solution (I have more code as it is a custom theme, but I guess that's give the idea of how I solved this). It work for LTR and RTL

Desktop:
Image
Image

Mobile:
Image
Image

My own quick solution for my own Tiki

// 2. Temporary fixes -----
// Reset and position the sitelogo and top navbar
// Turn module area to relative
header #top_modules {
position: relative !important;
}

// Turn logo module to absolute so it didn't push the menu items on mobile (logo for en, fr and he)
header #top_modules .module.box-logo {
position: absolute !important;
}

@media (min-width: 768px) {
header #top_modules .module.box-logo {
position: initial !important;
}
}

header #top_modules .box-menu {
width: 100% !important;
}

// Position the nambar toggler button for LTR
header #top_modules .box-menu button.navbar-toggler {
margin-left: auto;
}

// Position the nambar toggler button for RTL (hebrew)
header #top_modules .box-menu button.navbar-toggler:lang(he) {
margin-left: unset;
margin-right: auto;
}

header #top_modules .box-menu .navbar-collapse.collapse.show {
margin-top: 1rem;
}

header #top_modules .box-menu ul.navbar-nav {
margin-top: 0 !important;
}

@media (min-width: 768px) {
header #top_modules .box-menu ul.navbar-nav {
margin-right: 1rem !important;
}
}

// ----- End Temporary fixes

Importance
9
Easy to solve?
5
Priority
45
Demonstrate Bug on Tiki 19+
Demonstrate Bug (older Tiki versions)
Ticket ID
8261
Created
Wednesday 14 December, 2022 05:13:58 UTC
by Bernard Sfez / Tiki Specialist
LastModif
Wednesday 14 December, 2022 12:44:40 UTC


Show PHP error messages