Unable to locate the nav-brand in the Bootstrap navigation bar

I have encountered an issue with my nav-bar that works perfectly fine for the responsive part. However, on large screens, I am unable to click on the nav-brand link.

Below is the code I used:

<!--  NavBar -->
<div class="navbar-wrapper">


<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top"> <!-- class="navbar navbar-default"  -->
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><!-- data-target=".nav-collapse" -->
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="/drupal/" class="navbar-brand active">Accueil</a>

                    </div>


                    <div class="collapse navbar-collapse" id=".navbar-collapse">
                        <ul class="nav navbar-nav">
                           <li class="dropdown">
                                <a href="/drupal/%23" data-toggle="dropdown" class="dropdown-toggle"><img src="http://localhost/drupal/sites/all/images/rubon335.png" width="30" height="30" alt="" />Le club<b class="caret"></b></a>      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">         <li><a href="/drupal/content/le-club">Le club</a></li>
<li><a href="/drupal/content/lhistorique">L&#039;historique</a></li>
<li><a href="/drupal/content/le-projet">Le projet</a></li>
<li><a href="/drupal/" class="active">la structure</a></li>
<li><a href="/drupal/content/les-b%C3%A9n%C3%A9voles">Les bénévoles</a></li>
<li><a href="/drupal/"></a></li>
<li><a href="/drupal/"></a></li>
        </ul></li>

                <li class="dropdown">
                    <a href="/drupal/%23" data-toggle="dropdown" class="dropdown-toggle"><img src="http://localhost/drupal/sites/all/images/rubon504.png" width="30" height="30" alt="" />Les partenaires<b class="caret"></b></a>      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">         <li><a href="/drupal/content/bce-partenaires">Les partenaires</a></li>
        </ul></li>

                <li class="dropdown">
                    <a href="/drupal/%23" data-toggle="dropdown" class="dropdown-toggle"><img src="http://localhost/drupal/sites/all/images/rubon1173.png" width="30" height="30" alt="" />Pratique<b class="caret"></b></a>        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">         <li><a href="/drupal/page/multim%C3%A9dia">

If anyone has a solution or idea regarding this issue, it would be greatly appreciated!

You can test it at this link: test website

Just to note, I am using a bootstrap theme for Drupal 7.

csstwitter-bootstrapdrupal-7navbar

Answer №1

Your company emblem is hidden behind the navbar-collapse element.

To ensure the logo appears above the menu, incorporate the following code in your CSS:

.navbar-header {
    position: relative;
    z-index: 1000;
}

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

Learn the process of generating dynamic rows in HTML

Currently, I'm working on a website where I am incorporating the Flipkart API to display a list of products. However, the products are not appearing in the well-formatted view that I had designed. Specifically, I want only 4 products to show per row b ...

htmlcssangulardynamic

The values returned by screen.height and screen.width are not accurate

When a user clicks on a button, I want to enable an overlay. However, when the user minimizes the screen, the overlay does not cover the full page and buttons remain clickable. I have tried setting the screen.height and screen.width for the overlay div usi ...

javascriptcss

What are some effective ways to propose horizontal lines as useful breaks for web page layout?

I'm currently working on enhancing the print layout of my web pages using CSS. One issue I've encountered is figuring out how to properly handle page breaks. I have managed to avoid breaks in the middle of images and text blocks that should stay ...

htmlcssprinting

Having trouble positioning a specific element at the top right of the header navbar in Laravel Bootstrap 5

Is there a way to create a top navbar with the project name and menu on the left, and user management on the right? Currently, both options are aligned to the left. Here is an example of what I have: top navbar This navbar is placed in the header, and her ...

htmlcsslaravelnavbarbootstrap-5

Decorate the elements that do not contain a specific child class

I'm currently working on an angular project with primeng for the UI components. My focus at the moment is on customizing the p-menu component, specifically the appearance of list items that are not active. The challenge I'm facing is that the act ...

cssangularprimeng

Personalized hyperlink element with interjected spacing

I am currently in the process of designing a component library that is based on lit web components. However, I have a suspicion that my issue may not be directly related to Lit itself, but rather connected to shadow DOM. Within my link component, I have d ...

htmlcssweb-componentshadow-dom

Struggling with CSS inline styles not applying

I'm currently facing a challenge where I am unable to get an HTML element inline. I understand that using methods like float can solve this issue, but I am curious to know the specific reason why inline is not functioning properly. Check out my JS Fi ...

htmlcssinline

Choosing a Webpage Navigation Tab with Excel VBA

Having trouble selecting one of the navigation tabs on a webpage, even after coding for ID, password, and other screens. I've tried various combinations of "GetElementBy" without success. The tabs don't seem to be in their own frame. Here is the ...

htmlcssexcelvbainternet-explorer-11

Place two divs within a parent div, with one div aligned at the top and the other at the bottom

Here is the code snippet I am working with: <div id="container"> <div id="1"> div 1</div> <div id="2"> div 2</div> </div> I am looking to rearrange the order so that div 1 is positioned at the top and div 2 is ...

csshtml

Tips for ensuring smaller columns have the same height as their siblings

I'm facing an issue where I have a row with two columns dictating the height, but one of them is shorter than the others. How can I make the shorter column stretch to match the height of the row? This inconsistency in height is causing disruption to ...

css

Arranging HTML elements with jQuery - the existing script flips back and forth

I have created a code snippet on CodePen that showcases a feature of the website I am currently developing: http://codepen.io/barrychapman/pen/BzJGbg?editors=1010 Upon loading the page, you will notice 6 boxes. The first box is active, while the remaining ...

javascriptjqueryhtmlcssdom

Why isn't margin working with position: fixed?

I need help finding a solution for incorporating margin in a box within my App class. The issue is that the position fixed property doesn't seem to work as intended. <div className="App"> <div className="box"> ...

htmlcss

Using CSS pseudo elements before and after on an input range

I am looking to create a slider that dynamically displays boundaries. After searching online, I came across some code that I modified to suit my needs. This code uses only HTML and CSS and looks great in Chrome, but not so good in Firefox (I also tried it ...

csshtmlpseudo-element

Display Cascading Style Sheets in Django

I've been attempting to load the CSS sheet on my development computer, which is saved in the media directory as media/base.css. In my base/base.html template, I have included the following line: <link href="media/base.css" rel="stylesheet" type=" ...

htmlcssdjangorenderingstylesheet

Showing ASP code within a DIV element (inline)

Working on setting up a 'shopping cart' feature on our website, but running into some issues with the ASP code. Does anyone have any advice to offer? In the image below, you can see that when items are added to the cart, the 'total' is ...

cssasp-classic

Is it possible to implement Photoshop-inspired color curves filters on an HTML tag?

I am attempting to recreate the color curves filter from Photoshop using an HTML video tag. https://i.stack.imgur.com/erB1C.png The solution closest to what I need so far is how to simulate Photoshop's RGB levels with CSS and SVG Filters, but it doe ...

htmlcsscolorscurvesvg-filters

Element widths are displaying uneven alignment

I can't seem to wrap my head around what's happening here. I've got an HTML layout with a header, sidebar, and central content page. Both the sidebar and central content are within the same div acting as a clearfix. I floated the sidebar le ...

htmlcsscss-floatwidthclearfix

Creating a personalized Chatbot using Azure Conversation

Looking to customize the conversation with an Azure Chatbot (developed with Typescript) on a webchat or directLine channel (changing the color of the conversation, one for the bot and one for the user, for example). I've been following the guidelines ...

htmlcsstypescriptazurechatbot

Is there a way to condense the row navigation links into a dropdown menu button if the browser window size decreases?

I've noticed that on many websites, when you narrow the width of the browser window, the row of navigation links in the top navigation bar collapses into a dropdown menu button to prevent overflow. How can I implement this feature on my website? Righ ...

htmlcssoverflow

What is the best way to implement a shared header using HTML, CSS, and JavaScript?

Embarking on a new project at my workplace, I find myself tasked with the creation of a Universal Header. This endeavor involves ensuring that across all our domains and servers, customer-created sites, and third-party platforms, we have a seamless method ...

javascripthtmlcssangularjsweb-component