I am encountering a weird issue, only in Chrome, which adds extra space on top of an element with float: right, only upon resize (notice how the name then appears under the header fold):
Only when I resize back to the desktop media query do I encounter this issue.
My HTML is like this:
<header role="banner">
<a class = "logo"...>...</a> <!-- inline-block -->
<div class = "client">...</div> <!-- float: right -->
<nav role = "navigation">...</nav> <!-- display: inline-block -->
</header>
See the name "Michael"? It appears to the right, properly positioned in the main navigation. But once the browser resizes, at the end, it is moved to the bottom.
Any idea what's causing this and how I can fix it? I have verified that this occurs with the latest version of Chrome on Windows and Mac.
Switch positions between "client" and "navigation" like this:
<header role="banner">
<a class = "logo"...>...</a> <!-- inline-block -->
<nav role = "navigation">...</nav> <!-- display: inline-block -->
<div class = "client">...</div> <!-- float: right -->
</header>
The problem is that the navigation menu was floating around your "client" container. The elements after the floating element will flow around it when they are close.
Related
On my website https://bennetdev.de I have a fixed-top navbar which seems to be wider then my actual html tag. I think it is a problem between the navbar and my bootstrap modal but I don't know how to solve it. Due to the wider navbar a white space on the right side is shown when you visit the page, but disappears when opening the modal (through the contact button) and is not existent anymore until you refresh the page. Anyone knows how to fix this?
EDIT: There is no overflow because I hide the x-overflow on my body element but what I mean is the white bar on the right side, which would be a x-overflow without me hiding it
Ahh, yes, I see it now. It seems to be caused by the negative margins on a "row".
In your case, the div <div class="project row" >.
For bootstrap rows and columns to work correctly (ie. negative margins), the parent of a "row" should have the class "container". See the docs here.
eg.
<div id="projects" class="container">
<div class="project row">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
<div>
You can use max-height: 210px; to define how much height do you want for your nav bar.
Anyway I recommended to upload some code that we can see.
I'm using Materialize to create a navbar like the code below shows. After that, I render a div element to hold my application but the topmost part of it gets hidden by NAV element.
<div class="navbar-fixed">
<nav class="nav-extended deep-purple">
<div class="nav-wrapper">
...
<ul id="nav-mobile" class="application right hide-on-med-and-down">
<li>...</li>
...
<li>...</li>
</ul>
</div>
</nav>
</div>
<div id="application">Shazoo</div>
My current workaround is to simply add a top margin to the DIV named application but it's hardly something I want to see in a printed book as a best practice. I'm guessing there's a specific hack for Materialize that I haven't found. The documentation seems a bit Spartan on the website.
To avoid adding the margin or an extra div, just add top padding to your body like this:
body {
padding-top: ABCpx;
}
Where ABCpx is the height of your fixed navbar.
If the navbar is positioned using "fixed" then I adding margin-top to the following div would, in my opinion, be the correct method, or else adding padding.
I have two issues that I'm trying to solve with the right side of my nav bar.
1) I'd like to have the nav look like this "Login | Contact"
- Currently there's no divider in between, but when I add the divider line, it doesn't line up after the Login text.
2) When viewing the nav on mobile. The Login link stays in the correct place, but the "Contact" link falls down below the logo. How do I get it to lineup along side of the logo>
Here's my bootply:
http://www.bootply.com/waaBbWFaI1
Here's my HTML:
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-brand">
<img class="img-responsive" src="https://red.org/wp-content/plugins/a8c-stripe/img/red_logo.png" alt="Red Exchange">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav navbar-right">
<li>Login|</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
<!-- /.container -->
</nav>
Well, first of all I think adding the Divider like this
<li>Login|</li>
Seems to be a bad idea..Imagine You need the space that you are using for the list element for the label and it doesnt have any space left..So what it does is basically that it, puts it into the next line..
I would suggest you to do something like .. giving your anchor tag element(better if it would be wrapped around a div) a border to right
Another solution would be:
<li><a class="login" href="#">Login</a></li>
<li>|</li>
<li>Contact</li>
This would put the divider between those elements but not at the right place just check it. To put it into the right place you will have to give each list element following css.
ul {
display: block;
width: 100%;
height: 100% // only if its already around a header
li {
display: inline-block;
width: 15%; // each element gets 15% of the parents width
height: 100;
}
}
Learn CSS, the problem is that without knowing any css you will not be able to have your website, as you wish.
Issue is, that both are block elements login and contact and if you wrap it and there is no place because the font-size is too big and the elements take the whole space, they will automatically wrap..to the next line.
Sorry, i hope you understood my english.
I have 2 bootstrap navbars immediately followed by 2 horizontally centered dropdown menus as follows...
<div class="bodyWrapper">
<!-- top navbar - doesn't change size-->
<div class="navbar navbar-fixed-top navbar-inverse nav-top">
...
</div>
<!-- bottom navbar - collapses and changes size-->
<nav class="navbar navbar-inverse navbar-static-top" >
...
</nav>
<!-- 2 dropdown menus, always centered, and underneath the navbars-->
<div style="width: 100%;">
<div style="position: relative; left: 50%; top: -20px;">
<nav id="menu" class="menu">
</nav>
<nav id="menu2" class="menu">
</nav>
</div>
</div>
</div>
With just this setup, a horizontal scroll bar appears on mobile devices allowing the user to scroll across to nothing but blank space, other than my top navbar (which for some reason continues to fill the whole screen). I don't know why this happens but to solve it, I can add this CSS...
.bodyWrapper {
position : relative;
overflow : hidden;
}
(I experimented first applying overflow/overflow-x:hidden properties to body/html but it didn't remove the scroll bar on my iPhone).
But the problem with this option is that since the dropdown menus are now inside a wrapper with overflow:hidden, when the user tries to expand them they're cut off.
The only solution I can come up with, it to take the dropdown menus outside of the bodyWrapper div and use absolute positioning on them - but this is a pretty bad option since I'd constantly have to readjust their positioning because the height of the navbars above them can grow.
Anyway, all that's a long way of asking whether anyone can see a better way to deal with this mobile-specific (at least iPhones) issue. Thanks for any thoughts at all!
EDIT
example as requested:
http://codepen.io/d3wannabe/pen/gaVXzO
(the last line of the css can be commented in/out to see what happens to the dropdown)
You can set display of dropdown class to inline-block and its parent to have text-align to center.
.dropdown{
display:inline-block;
}
Check out here : http://codepen.io/anon/pen/aveEoP
I am new to Bootstrap and can't find any answer to my question.
I am using the AdminLTE bootstrap theme for testing. I want to create a nice website theme with it and I want a fixed width. The fixed width is working but not for the header bar.
I want the header bar and menu to always be fixed.
Because I add the "fixed" class to te body my site is fixed width.
Only the header isn't fixed width. It is only fixed to the screen.
Can someone help me out?
You need to wrap the interior of the header with a <div class="container"></div>
<header class="header">
<div class="container">
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<a href="index.html" class="logo">
<!-- Add the class icon to your logo image or logo icon to add the margining -->
Testing
</a>
</nav>
</div>
You need to remove the margin-left and position fixed from the navbar css as well.