Member Avatar for Muzi_1

I usesd external bootstrap and css to create a sytlish menu bar but the bar doesnt appear on mobile device. it just displays an empty space where the menu is supposed to be. Oh the same with logo.

  • 7 Contributors
  • 6 Replies
  • 215 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Quick diagnostic and fixes for the empty navbar/logo on mobile (reported by ). Replies from , , , and pointed at implementation, responsive rules and missing assets. The blank area usually means the navbar DOM is present but either hidden by CSS, never initialized because JS is missing/misordered, or key assets (fonts/images) failed to load.

Essential checks (fast):

  • Confirm a responsive viewport meta is in the HEAD.
  • Verify script order: jQuery must load before bootstrap.js.
  • Ensure navbar toggle button targets the correct collapse id and that the collapse element exists.
  • Use DevTools on a mobile emulator or device: inspect the DOM, computed styles, and the Network/Console panels for 404/403 (fonts, images, JS errors).

Example snippets to validate presence/order:

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- order matters -->
<script src="jquery.js"></script>
<script src="bootstrap.min.js"></script>

Targeted troubleshooting pointers beyond what was suggested earlier:

  • Check for CSS rules that hide the nav at small widths (display:none, visibility:hidden, transform/translate, or max-height:0). Temporarily disable custom CSS to see if the native navbar appears.
  • Inspect network requests for the logo and icon fonts. Glyphicons are bundled with Bootstrap 3 — if those font files are missing or served from another origin without CORS, icons and space reserved for them can vanish.
  • Confirm z-index: a full-width overlay (fixed header, modals, or a covering element) can push the nav beneath a transparent layer so it looks empty.

If the minimal Bootstrap navbar displays correctly in isolation, reintroduce custom CSS incrementally to find the rule that hides the items. A small reproducible test page (HTML + CSS + a screenshot of the Console/Network panel) will isolate the root cause faster than trial-and-error on the full site. 's point about follow-up stands — a minimal repro is the most efficient next step.

Recommended Answers

All 6 Replies

Member Avatar for gentlemedia

It has to do with the way you implemented it.

Member Avatar for MidiMagic

Is it too big to fit on the screen?

Member Avatar for phfilly

It could be your Glyphicons isn't setup correctly. Check the URL in the bootstrap.css leading to the Glyphicon file and that the files are actually in the directory.

Member Avatar for John_89

it is large according to the screen.

Member Avatar for Member #120589

The OP seems to have left the building a month ago. Unless (s)he comes back with more info, pointless floating this thread to the top of the forum - so let's stop posting here.

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.