Member Avatar for davy_yg

Hello,

Cek this site:

Cek the top navigation. I wonder if it is possible to let the navigation remains the same on pc and change it to bootstrap navigation for mobile phone on mobile phone.

Thanks in advance.

  • 3 Contributors
  • 4 Replies
  • 345 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

As noted, it's definitely possible. There are two pragmatic ways to get the effect you described (keep the current desktop nav, show a Bootstrap-style hamburger on phones). is also right that you can reuse Bootstrap markup — the extra step is deciding how to switch between the two navs without breaking accessibility or maintainability.

One simple CSS-only approach (two navs in the DOM, show/hide by breakpoint):

/* default: show desktop, hide mobile */
.desktop-nav { display: block; }
.mobile-nav  { display: none; }

/* phones: swap them */
@media (max-width: 767px) {
  .desktop-nav { display: none !important; }
  .mobile-nav  { display: block !important; }
}

Change 767px to whatever breakpoint fits your layout. This is quick but duplicates the link list in HTML — acceptable for small sites but harder to maintain and can cause focus/ARIA issues unless you handle them.

A cleaner approach keeps a single source-of-truth and clones/moves links into a Bootstrap collapse only on small screens. Example (vanilla JS):

(function(){
  var bp = 768;
  var desktop = document.querySelector('.desktop-nav ul');
  var mobile  = document.querySelector('.mobile-nav .nav-placeholder');
  function sync(){
    if(!desktop||!mobile) return;
    if(window.innerWidth < bp && !mobile.dataset.cloned){
      mobile.innerHTML = desktop.innerHTML;
      mobile.dataset.cloned = '1';
    }
    if(window.innerWidth >= bp){ mobile.dataset.cloned = ''; mobile.innerHTML = ''; }
  }
  window.addEventListener('resize', sync);
  window.addEventListener('DOMContentLoaded', sync);
})();

Notes and troubleshooting:

  • Ensure the hidden nav is not focusable for assistive tech: add aria-hidden="true" to the hidden nav and remove or set tabindex="-1" on its links when hidden.
  • Debounce resize handlers in production to avoid excessive DOM churn.
  • If you overwrite Bootstrap styles to match desktop, scope your overrides (use a .mobile-nav namespace) so you don't break the rest of the site.
  • Test with keyboard-only navigation and a screen reader after implementing.

Recommendation: prefer the single-source approach (move/clone links on small screens) for maintainability; fall back to CSS show/hide only if cloning/moving isn't feasible.

Recommended Answers

All 4 Replies

Member Avatar for pty

Yes, it's possible.

Member Avatar for gentlemedia

Like pty said!

But you will have to replace the current markup for that navigation to the bootstrap navbar markup.
https://getbootstrap.com/docs/3.3/components/#navbar

But 2, the layout of that website is totally broken (not responsive) on tablets and mobile phones, so you might want to fix that first.

Edited by gentlemedia
Member Avatar for davy_yg

Well, if I replace the current markup for the navigation to the bootstrap navbar markup, then will the navigation changes to bootstrap navigation on pc?

Just like in https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

See the thing is on pc, I still want to keep my current navigation.

Something like this:

If (mobile size) use bootstrap nav

else use pc nav

How to write the mobile size in syntax?

Edited by davy_yg
Member Avatar for gentlemedia

You take the bootstrap navbar markup and then you replace/overwrite the default CSS of it with the CSS (design and spacing) that you have written for your current navigation.

Edited by gentlemedia
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.