Trouble with Metro UI Library: CSS not loading properly

I am having trouble with the navbar CSS on my website while using the Metro UI CSS library.

Check out my HTML code:

<!DOCTYPE html>
 <html lang="en">
  <head>
<title>TelePrint Blog</title>
    <link rel="stylesheet" href="http://localhost/teleprintblog/assets/css/metro-bootstrap.css">
    <script src="http://localhost/teleprintblog/assets/js/jquery.js"></script>
    <script src="http://localhost/teleprintblog/assets/js/metro.min.js"></script>
</head>
<body>
<nav class="navigation-bar dark fixed">
<nav class="navigation-bar-content">
    <div class="element">
        <a class="dropdown-toggle" href="#">METRO UI CSS</a>
        <ul class="dropdown-menu" data-role="dropdown">
            <li><a href="#">Main</a></li>
            <li><a href="#">File Open</a></li>
            <li class="divider"></li>
            <li><a href="#">Print...</a></li>
            <li class="divider"></li>
            <li><a href="#">Exit</a></li>
        </ul>
    </div>

    <span class="element-divider"></span>
    <a class="element brand" href="#"><span class="icon-spin"></span></a>
    <a class="element brand" href="#"><span class="icon-printer"></span></a>
    <span class="element-divider"></span>

    <div class="element input-element">
        <form>
            <div class="input-control text">
                <input type="text" placeholder="Search...">
                <button class="btn-search"></button>
            </div>
        </form>
    </div>

    <div class="element place-right">
        <a class="dropdown-toggle" href="#">
            <span class="icon-cog"></span>
        </a>
        <ul class="dropdown-menu place-right" data-role="dropdown">
            <li><a href="#">Products</a></li>
            <li><a href="#">Download</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#">Buy Now</a></li>
        </ul>
    </div>
    <span class="element-divider place-right"></span>
    <a class="element place-right" href="#"><span class="icon-locked-2"></span></a>
    <span class="element-divider place-right"></span>
    <button class="element image-button image-left place-right">
        Sergey Pimenov
        <img src="images/211858_100001930891748_287895609_q.jpg"/>
    </button>
 </nav>
</nav>
    <header class="headerr row">

        <div class="col-md-6" style="border:3px solid #F00;">

            <img src="http://localhost/teleprintblog/assets/img/logo.png" 
                 class="img-responsive" alt="logo"/>
        </div>

        <div class="col-md-6" style="border:3px solid #F00;">

        </div>

    </header>


    <section class="row">
        <div class="col-md-1 col-xs-offset-1" 
             style="border:3px solid #00F;z-index:3;position:relative;">
            asdasda
        </div>
    </section>

  </body>
</html>

The navigation bar is not displaying correctly, even though all required files are loaded. What could be causing this issue?

I got the navbar code from here.

javascriptjquerycssjquery-plugins

Answer №1

Adjust:

<nav class="navigation-bar dark fixed">

To:

<nav class="navigation-bar dark fixed-top"> <!-- Or fixed-bottom -->

According to the official documentation:

By utilizing the predefined classes `.fixed-top, .fixed-bottom`, you can create a fixed navigation bar (either at the top or bottom).

Answer №2

The problem with Metro Bootstrap UI CSS from is as follows:

When you load the theme into localhost or a MVC framework, you might notice that the dropdown functionality does not work, right?

To fix this issue, take a look at this particular line in your HTML file:

<script src="js/load-metro.js"></script>

This is where the root of the problem lies.

You can open and review this file to find a solution - it's recommended to use a full URL when including JS files. In my case, I removed the mentioned line from my files:

<script src="js/load-metro.js"></script>

And instead, I replaced it with the following contents:

<script type="text/javascript">
$(function(){
    if ((document.location.host.indexOf('.dev') > -1) || (document.location.host.indexOf('modernui') > -1) ) {
        $("<script/>").attr('src', '<?=base_url('adminstyle')?>/js/metro/metro-loader.js').appendTo($('head'));
    } else {
        $("<script/>").attr('src', '<?=base_url('adminstyle')?>/js/metro.min.js').appendTo($('head'));
    }
})
</script>

In this code snippet, you'll see that I use base_url(), which is specific to my case. Make sure to replace it with your complete URL, and voila, the dropdown functionality should now be working properly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to automatically trigger a function once another function has completed its execution?

I am diving into the world of JavaScript as a beginner. All I want to do is trigger the function called seconOne() right after the execution of firstOne(). Specifically, I need the function two to be invoked when the value of p1 reaches 4. While I can us ...

javascriptfunctiondelayed-executionasynchronous-javascript

Can anyone suggest a way to detect if a website visitor has previously visited the site using jQuery?

Looking to add a special message for new visitors on my website in a div container. Once they read it, they have the option to click a 'Hide' button to remove it permanently. Any suggestions on how I can achieve this? ...

javascriptjquerycookies

Is it possible to customize the color of icons in react's Material-table?

I'm currently utilizing the material-table library and I'm struggling to individually change the color of each icon. Could you assist me with this? I attempted custom CSS, but it's affecting all icons at once instead of specific ones. Here i ...

javascriptreactjsmaterial-uimaterial-table

Is there a way to restore a minimized min.css file?

Recently, I attempted to utilize an online tool for unminifying my CSS code. However, when I replaced the minified code with the unminified version and accessed the URL, I discovered that the entire website had lost its layout. Unfortunately, relying sole ...

htmlcssminimizeunminify

Issue with Aligning Text Inputs and Images in Firefox

I am really struggling with this issue and it's driving me crazy. The problem lies with an image positioned at the end of a text input, styled using CSS. Here is the code snippet: .text_input{ background:url(../images/forms/text_input_back.png) t ...

cssfirefoxtextboxalignment

Customize the size of table cells in Bootstrap to fit the content

I am working on a table with Bootstrap where each cell contains a button element. I am trying to adjust the width of each cell to accommodate the button and margin, but using <td class="col-md-1"> doesn't seem to make any difference. Is there a ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

creation of objects using constructors in Node.js

As I delve into the world of Node.js, a burning question has arisen - how can I make a function accept multiple strings in the form of an array? Picture this scenario: export default (config: Config) => { return { target: 'https://google.com ...

javascriptarraysnode.js

The player clicks once and the game is played two times

Struggling with a coding issue here. I've got some code where you click on an image and if it can be moved to the next cell, it should move. function changecell(a){ var moved=false; if(a%3 !=0) { if(ij[a-1]==0) { moved=true; ...

javascripthtml

How can I choose an element based on its specific class using jQuery?

I've written some jQuery code that looks like this: jQuery(document).ready(function($){ $(".lmls").click(function(){ var groupid = $('span#gid').attr('value'); $("#otherpaths"+groupid).toggle(); // aler ...

jqueryselection

Updating or removing fullCalendar events in Symfony

I'm struggling to figure out how to update or delete fullcalendar events in my Symfony project. When adding a new event, I open a modal window with a form for submitting the event and inserting it into the database. This is my working controller: $ ...

javascriptsymfonyfullcalendar

What strategies can be implemented to improve the total blocking time in Vue for optimal performance

I'm facing a challenge that I can't seem to resolve. My page has a high total blocking time (2+ sec). Despite trying to load every vue component asynchronously, the issue persists with 2+ sec TBT. I'm puzzled by what could be causing such a ...

javascriptvue.jsasynchronousoptimization

Ensure that the <TabPanel> content occupies the entire width and height of its parent container

Currently, I am working with React and material-ui. Specifically, I am utilizing an appbar with tabs and my goal is to have the content of each tab expand to full width and height when selected. If you'd like to see an example, check out this sandbox ...

javascripthtmlcssreactjsmaterial-ui

Problem Encountered with Modifying Active Link Color in Next.js Following Introduction of Multiple Root Layouts

Currently, I am in the process of developing an application with Next.js and incorporating multiple root layouts from the official documentation at https://nextjs.org/docs/app/building-your-application/routing/creating-multiple-root-layouts. This was neces ...

javascriptnext.jsreact-hooks

Struggling with finding the appropriate CSS selector?

I'm struggling to find the correct selector. Let me do my best to explain the situation: I am currently working on a project where I am unable to make changes to the HTML and JavaScript due to dynamic content and other constraints. Within this proj ...

htmlcss

In React, I'm unable to navigate to a different page

My English may not be the best, but I am working on creating a Login Page. The issue I'm facing is that when I click the Login button, I want to navigate to the Home Page I designed using React. However, whenever I try to implement Link or Route comma ...

javascripthtmlcssreactjsbootstrap-5

Building the logic context using NodeJS, SocketIO, and Express for development

Exploring the world of Express and SocketIO has been quite an eye-opener for me. It's surprising how most examples you come across simply involve transmitting a "Hello" directly from app.js. However, reality is far more complex than that. I've hi ...

javascriptnode.jssocketsexpresssocket.io

Is there a way for me to show "No data" when the json response in vue js is empty?

Is it possible to display a message like "No search results" when there is no data available? I am new to this and only have basic understanding. Can someone guide me on how to achieve this? Example of my JSON data when it's empty: { "status": true ...

javascriptjqueryvue.jsvue-component

Using Mapbox GL JS to Showcase Latitude and Longitude Coordinates

I successfully added a feature to display the LAT LON readout of the cursor location on my website by following the tutorial provided in This Mapbox GL JS Tutorial However, the output I receive is in this format: {"lng:-74.949147382928,"lat":40.438292204 ...

javascriptmapbox-gl-js

The function RegisterClientScriptInclude seems to be malfunctioning inexplicably

I've been struggling for over 2 days trying various solutions and searching online, but I can't seem to get RegisterClientScriptInclude to function properly like everyone else. For starters, I am using .NET 3.5 Ajax and incorporating javascript ...

asp.netjavascriptajaxscriptmanager

Overriding a shared module service in Angular from a separate module: A step-by-step guide

I am working with various modules such as SchoolModule, UniversityModule, and SharedModule The SharedModule includes a BaseService that both the SchoolModule and UniversityModule providers are utilizing as an extension When loading the SchoolModule, I ne ...

javascriptangulartypescriptdependency-injection