I have one website onto the live server, but I am facing a problem into the navigation bar. The nav Items just blink for a second or two and they disappers. Why this is happening?
I have made the UI using bootstrap.
you may visit the website as under www.mathrubhumigroup.com. Please inspect the site and tell me why this is behaving oddly (specially the navigation bar items).
The navigation has disappeared because the collapse class has been applied to the navigation container, and it has the style visibility: collapse, that's why it has disappeared.
If you remove the CSS or override it with new CSS, the issue is resolved.
CSS:
.navbar-expand-lg .navbar-collapse {visibility: visible !important;}
Related
I created a bootstrap navbar for my Wordpress site and am having an issue. The navbar works, but when the user closes the expanded navbar, the li items linger and lag for awhile before disappearing. I would like them to disappear with the rest of the navbar background but can't figure out what is causing the delay and how to edit it. Is this a built in bootstrap feature? This issue only happens when the user is at the top of the page (when the user scrolls, the background changes to a white background color, which makes the lag less noticeable (although still present).
Here is the draft site: http://xbm.naa.mybluehost.me/
Thank you!!
The answer was:
.collapsing{
transition: none;
}
The transition effect wasn't being applied to the navbar links, just the background color.
I am currently developing a site that is almost done, however I am having an odd issue with the navigation on mobile.
The menu is collapsed using Bootstrap 3's collapse js. Everything works great, except when you open the menu it does not render my custom css immediately. It seems to open the menu, then jumps to the correct position and coloring. When you open the menu it starts on the right side, with the incorrect background color, then jumps to the correct positioning/color.
You can view the site here: http://brookmanville.com/
This issue happens regardless of browser or mobile device.
These fixes will make your menu more mobile proof:
Remove float: right; from .navbar-nav if it's the mobile version of your website. This behavior sorts out the sudden right to left movement.
Remove the margin on .navbar-nav, and give it a width of 100%.
I seem to have a strange Issue with the Bootstrap collapse dropdown feature in small views. I have icons in a header in both XS and S views, in XS, clicking on these will expand the feature, whilst in S - these dropdowns are already opened, and if I try to click the button that interacts with the dropdown I get a strange animation.
Iv noticed that turning off display: !important; on the navbar-collapse.collapse in the bootstrap css (browser debugger) seems to remedy the issue - however this is a poor fix for all kinds of reasons - and I dont know how I can override this in my custom style sheet. Has anyone had similar issues with Bootstrap Collapse dropdowns?
I have created a Bootply document, images and font-awesome icons won't show up on there so it looks abit strange, ignore the red line as that is there to test the height of something.
http://www.bootply.com/2dWHqPQ0x3
I know its not a coding service - just looking for pointing in the right direction, will be good for those with similar problems in the future.
It's because 'navbar-collapse' is built to work (toggle) only for xs screens as defined in your bootstrap.css.
This is taken from the bootstrap site:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
So essentially you need to change this so that it starts at 992px and not 768px.
#media (min-width: 768px){ /* change to 992px (or whatever you've set your grid breakpoint at for 'md') */
.navbar-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
}
}
I'm working on a site here: http://teamcherry.com.au/
The site uses a responsive nav plugin, so when viewport is narrow enough the nav is hidden behind a Menu button. When the menu button is pressed, the nav appears. In Firefox and Chrome, the nav appears over the top of content, which is the desired effect in this case. In Safari and mobile Safari however, opening the nav up pushes content down, which isn't what I want.
I've been trying to fix the issue by applying position: absolute to various elements but the layout keeps breaking. I'm sure I'm missing something really obvious here! Anyone able to help me out?
Remove float: right from your nav style.
I am attempting to build a content navigation pattern that uses vertically stacked tabs to toggle the display of hidden content panels next to the tabs. At smaller widths, this pattern breaks.
Heres my fiddle: http://jsfiddle.net/jrotton/xCeX8/1/
It is somewhat responsive...but lets say I have 12 tabs and the length of their labels range from "Nursing" to "Architecture, Design, and Construction". This breaks when the screen gets below 500px or so.
I could:
.contextNav { width: 100%; }
ul.checklist-select li { display:inline-block; }
..it works but it not ideal when you have more than a few tabs.
I would rather hide the tab menu and change the panels into collapsibles with clickable h2's. It's also important that the pattern is screen-reader-accessible but I haven't made it that far yet.
Any ideas on how I could do this? Thanks in advance..
http://www.zurb.com/playground/off-canvas-layouts
Here's a few ideas...
Also I would say with what you have at the moment, floating that menu to the right on the mobile version isn't going to work. at the mobile size, those nav items should be 100% width, and the nav should be above the content, or should be another "slide panel".
Jquery mobile also has some very useful, very common design patterns built right in:
http://jquerymobile.com/