I'm putting together a site using Bootstrap and html5shiv.js.
I've got two "navbar" divs, one above the other on the screen. In Chrome, Firefox and IE9, they look and work fine. On IE7 and IE8 (or rather, IE9 in IE8 mode), the dropdown menu on the top appears behind parts of the navbar below it. In this picture, "Overview" on the top has a dropdown with three items ("Person", "RSS", "Wiki") and the navbar below it has one item "2013-01 rev" which is a dropdown and which is showing through the Overview dropdown panel, and a second active item "Step 1 - People" which is showing in front of the dropdown panel.
I checked with the IE9 developer tools, and it shows the z-index on the dropdown panel (the part that says "RSS" and "Wiki" is 1000, and there is no z-index on the one below it. I've tried putting a z-index on the one below it, and it doesn't help.
Since jsfiddle doesn't seem to work on IE7, I've make a small subset of the page on http://xen1.xcski.com/tmp/ie7_problem.html that demonstrates the problem.
Try to add a positive z-index value on the top nav (i.e. the one with Overview, Cart, Access Review, etc.).
<div id="top-bar" class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav" style="z-index:1;">...</ul>
</div>
</div>
<div class="navbar-inner">
<div class="container">
<ul class="nav">...</ul>
</div>
</div>
</div>
Related
I have designed my own website using HTML5, CSS3, Bootstrap 4 and SCSS with some small bits of JavaScript and JQuery. The website looks fine on the desktop but on mobile devices there is excess white space to the right, despite me setting overflow to hidden on all device sizes.
I have used developer tools to inspect all of the elements and can see no reason for this behaviour, however I feel it is something to do with the carousel, as it also happens on another site I have built only on the page with the carousel.
This can be seen at https://www.mediumcarlie.co.uk
I have used developer tools to try to inspect the issue, I have googled everything, I have set max-width to 100% on nearly all elements where I am able to, I have used media queries and Bootstrap variables to adjust the size of the carousel elements.
<a href="#myCarousel" data-slide="prev" class="carousel-control-prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#myCarousel" data-slide="next" class="carousel-control-next">
<span class="carousel-control-next-icon"></span>
I expect for there to be no additional white space on smaller devices. Currently there is whitespace on the right hand side of mobile screens only on the index page
divs with class "row" in the Bootstrap should be wrapped with div with class "container".
In your case, you have a problem in the section with id = "home-heading". Use the wrapping as below
<section id="home-heading" class="py-5">
<div class="dark-overlay">
<div class="container">
<div class="row">...</div>
</div>
</div>
</section>
Try removing the margin-right: 15px; on the #home-heading > overlay-container > row
The most simplest way to do this is by adding overflow-x:hidden; to the HTML element since there are no contents that appear on the overflowing section by adding this you will not recieve the horizontal scroll.
Next is the reason why you are getting this:
In the home heading section there is a row present without the container class you need to add the container class before the row in order to sort it out.
<section id="home-heading">
<div class="dark-overlay">
<div class="container">
<div class="row">Loprem Ipsum</div>
</div>
</div>
</section>
I'm working with the bootstrap basic Wordpress theme which uses wp-bootstrap-navwalker.
I have one page (page X) on my site where I would like a sidebar menu to be displayed on the right side with sub-pages, while the main menu sits at the top.
I have used the advanced-sidebar-menu plugin that makes a sidebar menu based on the parent/child relationship (so under page X, there are a few child pages). Now, that automatically makes the parent page X a dropdown menu.
I would like this dropdown menu to be deactivated on desktops (or screens of a certain size) whereby you click on the page and it takes you to the first child of that page.
On mobile, I would like the dropdown to be shown and the sidebar to be hidden as it makes the navigation easier..
Hiding the sidebar isn't difficult. But it seems that with the dropdown menu, I can either have it on all the time or off all the time - ?
If I add the disabled class (class="dropdown-toggle disabled"), I can make the parent page X clickable and effectively hide the dropdown. However, then it doesn't work on mobile at all. If I don't add 'disabled' and hide the dropbox with CSS depending on screen size, Page X isn't clickable and therefore you can never see the child pages of Page X.
Is there a way of hiding the dropdown menu on desktops whereby clicking on the parent takes you to the first child page, AND enabling it on mobile?
Posting the code is a bit involved, so I've attached a screenshot of the menu instead. Basically, I don't want the dropdown to show on big screens but only on small screens...
example menu with dropdown
Here is the example you can show hide a particular element on different screen size, hope this help, test this demo on different screen size
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="visible-xs hidden-sm hidden-md hidden-lg text-info"><h1>Visible in xs devices</h1></div>
<div class="visible-sm hidden-xs hidden-md hidden-lg text-info"><h1>Visible in sm devices</h1></div>
<div class="visible-md hidden-sm hidden-xs hidden-lg text-info"><h1>Visible in md devices</h1></div>
<div class="visible-lg hidden-sm hidden-md hidden-xs text-info"><h1>Visible in lg devices</h1></div>
I'm trying to implement a fixed nav bar, but after certain screen size (~width:989),
the nav bar moves down. It doesn't work on mobile either.
Image:
The navbar is completely stuck to the footer instead of staying on top of the page.
You can check the code at: http://www.lostsavings.co.il
You have a few other issues, but the major issue is that the nav-fixed-top content is at the bottom of the page right now... in other words, you have:
<div class="container"> content here </div>
<div class="navbar"></div>
<div class="footer"></div>
Move that navbar to the top of the natural document flow, as if you were using no bootstrap, jquery, etc...
<div class="navbar"></div>
<div class="container"> content here </div>
<div class="footer"></div>
You'll have to fine-tune quite a few margins, etc... and I see a few !importants that could be getting in the way, too, but I'm guessing some of that has been part of your attempt to troubleshoot this. Making the above change at least made the navbar appear at the top for me.
i am trying to realize a layout with bootstrap.css. It is especially a main view with a right sidebar. It looks great on the desktop, but i am trying to remove the sidebar when i have a mobile view.
Currently my layout looks like this:
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
Main view goes here
</div>
<div class="span3 visible-desktop visible-tablet hidden-phone">
Sidebar goes here
</div>
</div>
</div>
So when i have a mobile view, the sidebar disappears. But the main view still has a span9 class, causing the whole view having some whitespace to the right. I am currently experiencing this on an iPhone 4 with mobile safari.
I am no css guru and i mainly work on the backend of webapps, but this time i just want to do it right, because it is for my personal blog. You can check out what i mean with this "whitespace" at my blog. I know that the navbar isn't pretty at all now, but this will be the next thing i'll fix.
Check it on www.responsinator.com
I guess there is no such white-spacing to the right. Moreover row-fluid class of bootstrap converts every child span class to full width when the site is opened on any other device except for desktop. So in any case, the width:100% is assigned to span9 when you open it on iPhone4.
There seems to be a little space on the right cuz of two reasons probably:
1. Text is not justified.
2. container-fluid adds a padding of 20px to the left as well as right.
Hope it helps. :)
I am not very sure how should I describe / name the problem. This problem exists at the FB 'Like" and Twitter 'Tweet' buttons, on the upper right of the sidebar. In other browsers, it works perfectly (i.e. will be displayed and usable on hover), but it doesn't work in IE8/9/10.
Here is the link : http://billyf.site11.com/problem/singleblogpost-1.html
Here's the structure for each button :
<div class="button">
<img src="" alt="image shown before hover" />
<div class="meta">
//here is the button to be revealed on hover//
</div>
</div>
How it works
When a person hovers on .button, .meta will show (by changing it's absolute positioning), and .meta will contain the FB Like and Twitter Tweet button.
In IE, if you hover and move on the buttons, the 'Like' and 'Tweet' boxes will flicker and are non-clickable, hence they are completely useless. I tried z-indexing, but still doesn't work. I want it to work like the 'Comment' button (the 1st button on the left).
Thanks for any suggestion / help!