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

How can I ensure my game or website fits perfectly on the screen without any need

I have recently developed a fun Erase-A-Man game that is optimized for mobile devices. However, I am facing an issue where users need to scroll to view all the letters on their screens. My goal is to make the game fit perfectly on all phone screen sizes so ...

javascriptjqueryhtmljquery-mobile

What causes the variance in behavior between the Angular-formly directive and type?

I am facing an issue with two input fields that are both generated using the same template. I have set the required attribute to true for both of them by using the following code snippet: ... templateOptions: { ... required: true } One input fiel ...

javascriptangularjsangular-formly

Changing the color of a text box when it is disabled can be achieved through JavaScript

I'm facing an issue with the formatting of my HTML elements. Specifically, I have 2 combo boxes and one text box in which all 3 are disabled. However, when they are disabled, the background color of the text box does not match that of the combo boxes. ...

javascriptjsp

How to dynamically change the position of an input field within a form using JavaScript and jQuery

I have a form displayed on my website that looks like this: input a input b input c I am wondering if it is achievable to rearrange the order of inputs using jQuery, like so: input a input c input b However, it is important that the data is still ...

javascriptjqueryhtmlforms

Exploring the contrast between Vuex store WATCH and SUBSCRIBE

Can you explain the main distinction between watch and subscribe, and when it is most appropriate to use one over the other? According to information on the Vuex official documentation, both methods appear to be essentially identical in functionality and p ...

javascriptvue.jsvuex

Tips for implementing PHP Instagram Signature using AJAX

I'm facing a challenge with the latest Instagram API, which now requires an Enforced Signed request that includes both an Access Token and Client Secret to generate a Signature. If anyone could spare some time to help me out, I would greatly apprecia ...

javascriptphpajaxinstagraminstagram-api

Enhancing Yii2 Navbar with Icons

I recently started working with Yii2 and I am in the process of creating a simple navigation bar using the built-in widget. The main challenge I am facing is how to include icons next to the menu options. The current state of my navbar is as follows: Na ...

phpcsstwitter-bootstrapyiiyii2

Step by step guide on integrating ReactJS into your current node.js backend application

I am currently working on a basic node.js API Setup: | project-name | public | index.html | ... some static js/css | app.js | package.json app.js var express = require('express'), bodyParser = require('body-parser'), ...

javascriptnode.jsreactjsexpress

Importing the .css file within a React component for dynamic styling

In my component, I am trying to dynamically load a .css file based on the result of an AJAX call in componentDidMount(). I have attempted adding a <link> element in the render return (which did not work), and also tried injecting the tag directly int ...

javascriptreactjs

Is there a way to track whether a user has logged into the Google Chrome browser using cookies?

While the LSID cookie can indicate if a user is logged into a Google account, it cannot be reliably used to determine if someone is signed into the Chrome browser because it may also appear when a person is signed into Gmail without being signed into Chrom ...

javascriptgoogle-chromeauthenticationcookiesgoogle-chrome-extension

AngularJS dropdown not reflecting changes when using ng-selected

While working with AngularJS, I have encountered an issue where the first child of the select element remains empty despite my efforts to populate it. Below is the HTML code snippet: <select id="connectTV" aria-label="How many Dish TVs" ng-model="conn ...

javascripthtmlangularjsangularjs-ng-repeat

Guide to repairing a CSS ball animation

I am attempting to create a simulation where a ball moves in the following pattern: bottom right -> top center -> bottom (/) left. However, my animation seems to be moving from top right -> bottom center -> top left (/). #stage { height:300px; border: ...

htmlcss

What is the best way to display a single instance of a React component that is declared in multiple locations within the app?

Imagine I have 2 main components, A and B. Now, component C needs to be created inside both A and B. How can I guarantee that the same exact instance of C is generated in both places? Essentially, I want them to stay synchronized - any changes made to one ...

javascripthtmlcssreactjscomponents

What causes the child positioning to break when a CSS-Filter is applied to the parent element?

One of my projects includes a title-screen "animation" where the title is initially centered on a fullscreen page and then shrinks and sticks to the top as you scroll down. I have provided a simplified working example below: $(window).scroll( () => ...

csscss-positioncss-transformscss-filters

Achieving full opacity text within a semi-transparent div: a simple guide

Within my div, I have an a tag. I applied opacity:0.5 to the div, causing the text inside to also appear at 0.5 opacity. I am looking for a way to have the text display with opacity:1 inside my div that has an overall opacity of 0.5, without resorting to ...

cssopacity

Utilizing Jquery for seamless page transitions in Rails with the help of Ajax calls

I am currently working on a project that involves creating two pages. The first page will display a selection of items that I want to showcase on the second page. On the initial page, I have already picked out the specific items that I plan to show on the ...

ruby-on-railsajaxruby-on-rails-3jquery

Is there a way in Angular2 to append a class name from a variable to the host element without removing the current classes?

I am facing a challenge where I have a class name stored in a variable and I need to apply it to the host element of my Angular2 component. However, I am struggling to find a solution for this. While I can easily add a constant string as a class using Hos ...

cssangularthemes

Following an update, Storybook is failing to apply JSX styles

After upgrading my project from NextJS 10 to NextJS 12, everything is functioning normally except for Storybook, which is now missing its styles. I utilize the styled-jsx library to create embedded css, implementing it in this way: const SearchResult = ({ ...

cssreactjswebpacknext.jsstyled-jsx

Implementing a return of a view from a Laravel controller function after an AJAX request

I'm currently working on a bookstore project where users can add books to their cart. Users have the option to select multiple books and add them to the cart. When the user clicks on the Add to Cart button, I store the IDs of the selected books in a J ...

javascriptphpajaxlaravel

Tips for maximizing website performance on touch-enabled devices

When using a touch device such as an iPhone, iPad, or Android device, it can be challenging to accurately tap on small buttons with your finger. So far, there is no universal method in CSS media queries to detect touch devices. As a workaround, I check if ...

javascriptcsstouchdom-eventsusability