Troubleshooting a navigation problem with DNN and Bootstrap-3 specifically for mobile devices

Here are the steps to demonstrate this issue:

1. Visit the following page of the website:

2. Resize your browser window to mobile size and close the menu using the icon. After the animation finishes, the navigation items reappear.

I have been struggling to resolve this issue by utilizing the CSS code mentioned below from another source:

.navbar-collapse.collapsing {
    -webkit-transition: height 0.01s;   
    -moz-transition: height 0.01s;   
    -ms-transition: height 0.01s;  
    -o-transition: height 0.01s;  
    transition: height 0.01s;  
}

However, I am unable to find a solution to make it disappear after the animation completes.

Could someone advise on how to move it off screen post-animation?

Unfortunately, my JavaScript skills are not advanced enough to tackle this problem effectively.

csstwitter-bootstrap-3dotnetnuke

Answer №1

There seems to be an issue with the "skin.css" file. To fix this problem, simply locate and open the file then proceed to comment out or delete the line that contains (display: block) in the given code snippet:

.container > .navbar-header, .container > .navbar-collapse {
 /* display: block; */
  width: 100%;
  float: none;
}

Answer №2

include this in your stylesheet

.navbar-collapse.collapsing .navbar-nav {
     display:none;
}

Don't forget to add this to your CSS file!

Answer №3

After some brainstorming, I've come up with a creative workaround that should do the trick for now. Time to put this issue on hold for the time being.

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

Resize the image to fit the dimensions of a div, but unfortunately, the overflow: hidden property is not effective in this

I'm looking to set up an image gallery using the Bootstrap grid layout. The gallery should span 100% width and consist of two grids in a row, each containing one picture. I want the height of the second picture to match that of the first, with croppin ...

htmlcssbootstrap-4

What is the solution for addressing the size problem of the image within the modal?

img1 img2 Upon clicking on the modal, it displays the image similar to a lightbox, but the issue arises when the image becomes scrollable and does not fit the screen properly. Take a look at the code below: HTML <div class='row'> ...

htmlcsstwitter-bootstrapbootstrap-4

Creating a Distinctive HTML Structure with Div Percentage (HTML 4)

I am new to web design and have a unique approach; I believe in the importance of flexibility. It puzzles me why pixels (px) are commonly used instead of percentages, maybe my perspective is misunderstood. I've been on the hunt for a basic HTML layo ...

cssdomlayouthtml

Is there a way to specify the dimensions of the canvas in my image editing software based on the user-input

Here is the code and link for my unique image editor. I would like to allow users to enter the desired width and height of the selection area. For example, if a user enters a width of 300 and height of 200, the selection size will adjust accordingly. Addit ...

javascriptjqueryhtmlcss

Creating a Vertical Stack of Divs Using HTML and CSS

I've attempted various methods to align the links vertically in the left-most column, but without success. Any suggestions or advice would be greatly appreciated! http://jsfiddle.net/adRuz/112/ .box { background: #E8E8E8; border-radius: 8px ...

htmlcssstack

Refresh the CSS without having to reload the entire page

I am working on a web page that operates on a 60-second timer. The code snippet below is responsible for updating the content: protected void RefreshButton_Click(object sender, EventArgs e) { ReportRepeater.DataBind(); ReportUpdatePane ...

c#asp.netcssupdatepanel

Resizing Images Responsively Using Bootstrap

I'm working on specifying image sizes for different screen sizes. I'm wondering if there are any specific Bootstrap classes that only work at certain screen sizes. If so, it would be great because then I could use something like <img class = " ...

csstwitter-bootstrapscaling

Locate specific phrases within the text and conceal the corresponding lines

I have a JavaScript function that loops through each line. I want it to search for specific text on each line and hide the entire line if it contains that text. For example: <input id="search" type="button" value="Run" /> <textarea id ...

javascriptjquerycss

Ensure that the div extends to the bottom of the page

I'm currently working on a web design assignment for one of my courses, and I'm facing some challenges with getting the div elements to span the entire page in terms of color. http://jsfiddle.net/vmm1s4Lt/ http://codepen.io/bmxatvman14/pen/fih ...

htmlcss

What advantages does the use of $(e).attr(name,value) offer compared to using e.setAttribute(name,value)?

Scenario: The variable "e" represents an element of type "HtmlElement" and not a "css selector" I am referring to any attribute, not just the standard allowed ones like "atom-type" or "data-atom-type". Regardless of the attribute name, will it function wi ...

javascriptjqueryhtmlcss

Why does the diamond symbol appear distorted on my iPhone screen?

My website is similar to SO where moderators have a diamond sign at the end of their name. However, I am facing an issue on my iPhone where the diamond sign looks red and distorted (on Chrome it appears normal). https://i.sstatic.net/RnpyP.jpg As you can ...

htmlcssiphone

Using Bootstrap's dual listbox, you can easily select single options with the ability to add or delete them. Upon selection, the

Could someone please assist me in resolving this issue? I am looking for a dual listbox with single select option, unlike Bootstrap which only offers dual listboxes with single/multiple select. To Clarify: Here is an example: In my dual listbox, the le ...

jqueryhtmltwitter-bootstrapcsslistbox

What could be the reason why certain animations fail to run on specific icons when hovering over the parent element?

I recently launched my website which features a series of tabs with unique icons. Some of the icons, labeled as soap-icon, have animated effects while others, categorized under icomoon-icon, do not. Upon checking the console, I discovered that the animati ...

jqueryhtmlcssanimation

Exploring Vue and Webpack's tree shaking functionality, side effects management, and its impact on CSS: Loading unused component CSS

We are currently grappling with the challenge of effectively implementing tree shaking for CSS within Vue Single File Components using Webpack. Within our package.json file, we have specified: "sideEffects": ["*.css", "*.less","*.vue"], which appears to b ...

cssvue.jswebpackvuejs2

Transform your image using the Bootstrap framework

I am attempting to create a similar banner using bootstrap. You can view the demo of the banner here. https://i.stack.imgur.com/JXLNY.png I'm struggling to understand how to achieve this in bootstrap 3 and where to begin. Should I use rows and colum ...

htmlcsstwitter-bootstrap

Having trouble positioning text alongside a checkbox in Bootstrap v3.3.6?

Dealing with the alignment of checkboxes in Bootstrap forms is driving me crazy. It seems to look almost perfect on both Chrome and IE on my desktop, where the text and checkbox are aligned almost perfectly. However, when I view it on Chrome on my tablet ...

csstwitter-bootstrap

How can you ensure a line stays fixed to the bottom of a box regardless of the text size in SCSS and HTML?

I have a CSS rule that displays a line within a div only when the div is active. The specific SCSS class I am using is: .active-tab:after { content: ''; display: inline-block; height: 4px; width: 100px; right: -7px; background-color: ...

htmlcsssass

Customizing the color of a select dropdown in Bootstrap using CSS styling

I am having difficulty changing the default blue color for Bootstrap select dropdowns. Despite trying :hover and :active selectors on both option and select, I have not been successful in making the desired changes. Could anyone provide insight regarding ...

htmlcsstwitter-bootstrapdatatables

Arranging block-level elements in a horizontal format

In the book "CSS The definitive Guide", it is mentioned that "The values of these seven properties must add up to the width of the element’s containing block, which is usually the value of width for a block element’s parent". However, in the case provi ...

htmlcss

The process of making a pop-up modal instead of just relying on alerts

Attempting to change from using an alert to a pop-up with a simple if statement, but encountering some issues. Here is the current code: if(values == ''){ $('body').css('cursor','auto'); alert("Blah Blah..." ...

javascriptjqueryhtmlcss