Display of menu content may be unavailable at certain screen resolutions

Upon creating a new project in Visual Studio 2017, I developed a default master and sub pages website.

In the master page, I incorporated a menu using a mix of divs and tables.

Everything functions properly except for when the window size is reduced to around 1280 px. At this point, the menu items disappear and become unclickable on the menu bar.

What's interesting is that the menu still has enough room, yet the items are hidden, showing only the black bar background of the menu (with the color set to black for the table).

<div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-collapse collapse ">
                    <asp:Table ID="MenuTable" runat="server">
                        <asp:TableRow>
                            <asp:TableCell>
                                <asp:HyperLink runat="server" ID="Contacts" NavigateUrl="~/Forms/Contacts?#DynamicLinkReplace">Kontakte</asp:HyperLink>
                            </asp:TableCell>
                            <asp:TableCell>
                                <asp:HyperLink runat="server" ID="PingLink" NavigateUrl='javascript:void(window.open("~/forms/ping.aspx", "Ping to XXXXX", "width=640, height=480"));' >Ping</asp:HyperLink>
                            </asp:TableCell>
                            <asp:TableCell>
                                <asp:HyperLink runat="server" ID="RemoteLink" Target="_blank">Remote</asp:HyperLink>
                            </asp:TableCell>
                            <asp:TableCell>
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell>
                                <asp:HyperLink runat="server" NavigateUrl='~/Forms/JournalT.aspx?#DynamicLinkReplace' id="JournalT">Journal T</asp:HyperLink>
                            </asp:TableCell>
                            <asp:TableCell>
                                <asp:HyperLink runat="server" NavigateUrl='~/Forms/JournalH.aspx?#DynamicLinkReplace' id="JournalH">Journal H</asp:HyperLink>
                            </asp:TableCell>
                            <asp:TableCell ID="MenuCellEnvelopeClearance">
                                <asp:HyperLink runat="server" NavigateUrl='~/Forms/Clearance.aspx?#DynamicLinkReplace' id="MenuEnvelopeClearance">Freigabe</asp:HyperLink>
                            </asp:TableCell>
                            <asp:TableCell>
                                <asp:HyperLink runat="server" ID="DetailsLink" NavigateUrl='~/Forms/Details.aspx?#DynamicLinkReplace'>Details</asp:HyperLink>
                            </asp:TableCell>
                        </asp:TableRow>
                    </asp:Table>
                </div>
            </div>
        </div>

The CSS is not shown because it's mainly used for styling such as color and text size (font-size 14 px, line height 1.4285).

Now, I have two questions: 1) What exactly causes this issue so I can avoid it in the future, and 2) How can I fix this behavior?

Answer №1

If you're working on your Default Style sheet, take a look at this code snippet:

@media only screen and (min-width: 1000px) {

  #Container{
    style:block;
  }
}

You might find the min-width or max-width properties in your CSS or Bootstrap code. Make sure to check your style sheet for these in the future.

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

Using AngularJS and ChartJS together for stellar data visualization

I need help displaying the canvas element within custom angular directives. Being new to AngularJS, I am in search of a demo or idea regarding Chart.js integration with AngularJS. Important: I specifically require a custom directive for chart display. T ...

Using Angular 2 to position a md-fab button with 'position: fixed' inside an inner component

Utilizing the md-fab-button from the initial angular2 material-framework has presented a challenge for me. I am attempting to set the md-fab-button(for adding a new entity) with position: fixed, but my goal is to position the button within an inner compone ...

Utilize a Material UI GridList to transform images into a captivating background display

Incorporating a GridList displaying a variety of images fetched from an external source, I have successfully created an ever-changing image gallery. Now, my goal is to convert this dynamic image gallery into grayscale or transparency and utilize it as a ba ...

At times, the AngularJS directive may not be invoked

Here is my custom directive: ppm.directive('focusMe', function($timeout) { return { link: function(scope, element, attrs) { scope.$watch(attrs.focusMe, function(value) { if(value === true) { console.log(& ...

Accessing the return value from an ASP.NET web service in JavaScript outside of the callback function

I am facing an issue with my ASP.NET web service that returns a simple string value. I have successfully called this web service using JavaScript and the script manager. However, I am in need of accessing the return value directly from where I made the cal ...

Utilizing AJAX to showcase individual PHP files

My PHP elements are not being displayed in the code, and I need to figure out why. Below is the HTML code I am currently using: <div class="tablocation"> <ul class="css-tabs"> <li><a class="current" href="/wp-content/themes ...

How can I restrict the number of items displayed in each row within a navigation submenu flexbox?

My primary navigation menu has numerous child items, and I want to ensure they remain visually appealing and organized. To achieve this, I am aiming to limit each row of submenu items to only 4. After researching other solutions online, I attempted adding ...

Circular Graphical Representation using CSS3 styling

Check out my latest creation - a donut chart: http://jsfiddle.net/4azpfk3r/217/ I'm trying to customize the appearance of the donut chart. Is there a way to give it a red outline and have the filled score/percentage in solid red, while leaving a tran ...

when the window is scrolled a certain amount, use jQuery to scroll back in the opposite direction

Using jQuery for Background Image Position: $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 50) { $(".class").addClass("bgposi"); // $(".top").addClass("fixd"); // $(".logo").addClass ...

Error Encountered: Unable to utilize $(...).mask function with jQuery in ASP.NET using C#

I have encountered an issue while working on a task involving jQuery masked for date. When running the task in HTML, it works perfectly fine. However, when attempting to run it in ASP.NET, I face the problem where 'mask is not a function'. Below ...

The href link on Android and iPhone devices is not activating, instead showing a focus rectangle

I've encountered an issue with the responsive layout of my HTML5 site on Android and iPhone versions. The links on the site are behaving strangely - they only work if I hold them down for a full second. Otherwise, they act as if a hover event is trig ...

Using CSS GRID for creating layouts with customized grid-template-areas that include empty cells and automatic placement

Struggling with implementing the css grid layout module to showcase a 12-column, 3-row grid. The initial row should only contain two elements, positioned on each side of the grid with empty cells in between using ten periods. Subsequent rows should autom ...

Create concise information in a single line with Twig

So, I basically need to display the following information inline on my website: Just like this: Family: Open Sans - Variant: Regular Italic Size: 15px - Line Height: 25px - Paragraph: 15px Color: grey_3 This is the code snippet: {% include "../compone ...

CSS and JavaScript dropdown malfunctioning due to a position swap in internal CSS

This example demonstrates functionality .c1 { background-color:red; position:relative; } .c2 { background-color:blue; position:absolute; height:50px; width:100px; display:none;} .show { display:block; } <body> <button ...

For Flexbox front end design, the left side should be contained within a container while the right side should seamlessly stretch across the

https://i.sstatic.net/3RYY6.png I'm facing a challenge in designing a website with a unique layout that has left me puzzled. I've created a codepen example to showcase what I'm trying to achieve. Specifically, I need to implement a Hero Ba ...

Encountering a StackOverflowException while using JsonConvert.DeserializeObject

Currently, I am working on a project that encompasses an ASP.NET Web API (running on .NET 4.6.2) as the backend, a Web API Client Implementation PCL serving as the middleware, and Xamarin.Forms projects as the frontend. Following recent modifications to my ...

Using jQuery to create radial-gradients with the background-css feature

I'm a newcomer to this online community and English is not my first language. Despite that, I will do my utmost to clearly explain the issue at hand. Recently, I utilized the .css function in jQuery to create a design element successfully. However, I ...

Toggle checkbox feature in Bootstrap not functioning properly when placed within ng-view

When attempting to embed a bootstrap toggle checkbox within <ng-view></ng-view>, an issue arises where a regular HTML checkbox is displayed instead of the expected bootstrap toggle. Strangely, the same checkbox functions as a bootstrap toggle w ...

Ways to display an error message in Angular 8 when entering anything other than numbers in a text box

In my Angular 8 application, I have a text box that only allows the user to type numbers. If they try to type an alphabet or special character, it should display an error message below the text box. The error message should disappear once the user starts ...

What is the most efficient method for embedding a YouTube video into a <video> tag using React?

I tried embedding a YouTube video using an HTML5 tag, but encountered an error <div className={classes.VideoContainer}> <video className={classes.movieInfo__trailer} src="https://www.youtube.com/watch?v=V3hy2aLQFrI" ...