What is the reason for the menu links not working?

I am having issues with the menu links on my site:

Check it out here

Could someone please tell me why the menu links are not working?

HTML CODE:

<header id="masthead" class="navbar navbar-default" role="banner">
    <div class="container-fluid">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="width: 674px; margin-left: 260px;">
<!--            <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="#bs-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <h1 class="site-title"><a href="http://bagel.dg-site.com/bagel/" rel="home">Bagel House</a></h1>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">

                <a class="screen-reader-text skip-link" href="#content">Skip to content</a>

                <div class="menu-ggg-container"><ul id="menu-ggg" class="menu"><li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-17 current_page_item menu-item-18"><a href="http://bagel.dg-site.com/bagel/">Home</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="http://bagel.dg-site.com/bagel/index.php/about/">About</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10"><a href="http://bagel.dg-site.com/bagel/index.php/news/">News</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="http://#">Contact</a></li>
<li id="menu-item-227" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-227"><a href="http://bagel.dg-site.com/bagel/index.php/contact/">Contact</a></li>
</ul></div>                
            </div><!-- /.navbar-collapse -->
<!--            </div>-->
    <!-- /.container-fluid -->
        </nav>
    </div><!-- .container -->
</header>

I have included an image to help illustrate the issue with the links.

https://i.sstatic.net/ApJGC.jpg

Could the problem be related to a hidden div?

I attempted to use z-index but unfortunately, it did not resolve the issue...

If anyone has a solution to this problem, I would greatly appreciate your help.

Thank you in advance!

htmlcss

Answer №1

The issue lies in the z-index value set to -2 on .navbar-default. Adjust it to a higher number like 10 to ensure the links are clickable.

.navbar-default {
     background-color: #F8F8F8;
     border-color: #E7E7E7;
     z-index: 10;  <-- change from -2 to 10
}

This adjustment should resolve the problem, but you may also need to make changes to other elements in your layout.

Assigning a negative index to the nav container can cause nav elements to inherit that z-index in some browsers, leading to issues. Consider redesigning your layout accordingly.

Answer №2

Exploring a different approach, consider using the li onclick event instead of an anchor tag:

<li onclick="location.href='http://bagel.dg-site.com/bagel/index.php/about/">About</a></li>

Answer №3

To improve the layout, it's advisable to eliminate the z-index property from both the .navbar-default and navbar-fixed-top classes.

Additionally, adjusting the navigation width to 1046 pixels is recommended for a better visual appearance.

Answer №4

Feel free to take a look at the example. I've simplified your code for demonstration purposes.

http://example.com/examplefiddle/

  • Eliminated the extra div above the ul.
  • Inserted the classes nav navbar-nav into the ul.

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

spacing between text and bottom border

Is there a way to add space between text and the border below, as shown in the image linked? I'd like the space to be 5px with a font-size of 15px. My attempt: .selected { color: #284660; } .selected:after { content: ''; position: a ...

htmlcss

Steps for applying background color to a chosen element

Using a specific template, I have listed topics in the following way: //Template used for topic list display %li.topic{:topic_slug => "<%=topic.slug%>", :topic_name =>"<%=topic.text%>"} %a{href: "#!/topics/<%=topic.slug%>" } <%= ...

javascriptjquerycssbackgroundhaml

Retrieve the value from an input field when the value is returned from JavaScript

Scenario: I'm currently working on creating a QR reader to retrieve a specific value. You can check out the progress here: What's functioning: scanning. When I scan a QR code, a value is displayed in the text box. Here's the code snippet b ...

javascriptjqueryhtml

How can I change the displayed value of a 'select' element programmatically in Internet Explorer?

My interactive graphic has a drop-down menu implemented with a <select> element. Everything functions correctly, except when using Internet Explorer. The issue arises when attempting to programmatically change the selected value of the <select> ...

javascripthtmlformsd3.js

I'm having trouble getting my code to update after performing a search

Is there anyone out there who can lend a hand in pinpointing the troublesome code that's preventing my program from working? No matter how much I debug, I can't seem to get it right. It's been 3 hours of staring at this and I'm still st ...

phphtmlmysql

Watch MP4 videos using the videotag feature in the Firefox browser

It seems like a form of play, since Instagram uses it and the only compatible format is mp4. However, I'm unsure how to get it to play. Any advice? ...

htmlfirefoxvideomp4html5-video

Why are the HTML links generated by JS not opening in Chrome?

<a href='http://www.xyz.hu/xyz' alt='Kosár' title='Kosár'>Megtekintés</a> Additionally: - A setInterval function refreshes the sibling's content every second, although it should not affect this specific el ...

javascriptjqueryhtmlcss

Utilizing CSS styling in PHP as a functional approach

In my journey of learning CSS, HTML5, and jQuery, I have found a unique way to organize my CSS code into different chapters. I simply call them into the head section when needed. This method allows me to have only the necessary CSS on each page, making it ...

phpcssfunction

Exploring the integration of mixins from .scss files within node_modules into our .tsx or .jsx files for enhanced styling

I am currently facing a challenge with importing a .scss file from one of the installed node_modules into my .tsx file. The scss file contains a mixin named @mixin make-embedded-control($className: embedded-control){.....} which has all the necessary css ...

cssreactjssassscss-mixins

Discover the ultimate guide to implement a captivating visual overlay using CSS

I've crafted some links using CSS to incorporate a background image (to give it the appearance of a button) employing the subsequent code: <a class="btnImg" id="btnImgConfig" href="#"></a> .btnImg { width:100px; height:100px; ...

css

Make the color of the chosen item black while keeping the placeholder's color grey within React Picky

Utilizing react picky for the multiselect dropdown feature. Attempting to maintain the placeholder color as grey while displaying black text after selection. Markup <Picky multiple={true} includeFilter={true} onChange={this.onRulesSelect ...

cssreactjs

What is the best way to consistently update the name of a variable in PHP?

Forgive me in advance if my question seems a bit confusing. I currently have three separate PHP files. The first one prompts the user to select the quantity of products they want (between 1-20) using a variable called $quantity. Once a number is chosen fr ...

phphtml

Tips for ensuring HTML5 <video> compatibility with CSP in Google Chrome

When I implement an HTML5 video element on my website with a strict Content-Security-Policy directive (default-src 'self'), I encounter an error in the Google Chrome console upon loading a page for the first time. The error message states: [Repo ...

htmlgoogle-chromehtml5-videocontent-security-policy

Insects featuring a button and tooltip duo creating a captivating "pull-effect"

Why is the button pulling when I move the cursor over a camera? Is there a way to solve this issue? <div class="input-group-btn advanced-group"> <button class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Send Imag ...

javascripthtmlcsstwitter-bootstrap

angularjs reset file input form

Whenever I click publish, I want to clear my form: $scope.product = {}; $scope.upload = function(user) { var formData = new FormData; $scope.product.owner = user; for (key in $scope.product) { ...

javascriptangularjshtml

Changing the Background Color of the Toolbar in Ionic

I am having trouble making the background color of my footer dynamic. I have tried binding the element to a class or applying dynamic styling, but it doesn't seem to work. Even when I have this in my HTML: <ion-footer align="center" style="height: ...

cssionic2

Increase the width of paragraph by adding white-space padding

I am attempting to control the number of characters in a paragraph to a specific limit. If the text is shorter, I want to add whitespace padding, and if it exceeds the limit, I will truncate it with an ellipsis. All containers containing paragraphs should ...

htmlcsswhitespacezurb-foundation

Adjusting Images and Icons' Sizes Automatically on a Single Line

Imagine a row of social media icons/images (like Facebook, Twitter, LinkedIn) displayed together. How can I ensure that when I add more icons/images to this row, their sizes adjust automatically to stay on the same line instead of moving to the next one? I ...

htmlcssimageicons

As each new line is added, the span text starts from the bottom and moves up by one line

I am facing an issue where I want a span to start from the top and expand as the text length increases, but it is currently starting from the bottom and moving upwards. See the image below for reference: View Image <div style="width:70%;margin-left: ...

htmlcss

Menu options arranged vertically, revealing submenus that fly out upon mouse hover

I am attempting to develop a vertical menu with flyouts, which includes sub-menus. Can you point out any issues in the code provided below? <html> <head> <title>Untitled Document</title> <style type="text/css ...

htmlcsssubmenu