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.
Related
I have the following HTML with Bulma:
<body class="has-navbar-fixed-top">
<nav class="navbar is-fixed-top"><!-- My nav bar --></nav>
<div class="columns">
<div class="column"><!-- Header I'd like to be fixed --></div>
</div>
<div class="columns">
<div class="column"><!-- Sidebar I'd like to be fixed --></div>
<div class="column"><!-- Main content that should be scrollable --></div>
</div>
</body>
I already use a fixed navbar, it's working fine. But I'd like to have another fixed header just below it. Then below that header, to have the left side fixed as well (side menu), and finally to have the main content scrollable.
Any idea how I could achieve this?
this isn't a "sticky menu" problem. this isn't a "nav blocking itself" problem. this is a "nav overrides anything in the DOM above the nav" problem.
<header>
<img src="social.png">
<img src="myLogo.png">
<img src="thingy.png">
</header>
<nav class="navbar navbar-default center">
<div class="container-fluid">
<div class="navbar-top">
... all the rest of the bootstrap nav crap ...
</div>
</div>
</nav>
so the link on the image is blocked. the nav component magically reaches to the top of the page and even if i set the index on the <a> or the <img>, it still won't fire.
padding the body doesn't work, because nothing is hidden and i'm happy with the layout. for those who are needing a visual, here you go:
the bluish area is part of the <nav> (marked in green) which sits below the <header> in the DOM... which makes no sense to me. and it doesn't matter where the images is positioned, or how large/small it is, the <nav> will still cover it.
how the heck do i fix this? obviously i want to be able to click these links and go... but the <nav> blocks them completely.
<header class="nk-header">
<!--
START: Navbar
<nav class="nk-navbar nk-navbar-top nk-navbar-sticky nk-navbar-transparent nk-navbar-white-text-on-top">
<div class="container">
This is bootstrap framework, or what ? I tried understand this, google it, but fail.
It's Godlike-html ...Classes ...
There Is Multiple Style Classes are define to <nav> .. </nav>
nk-navbar : For Style to Navbar
nk-navbar-top : For Fixed Nav Bar On Top
.nk-navbar-sticky – sticky navbar on page scroll
.nk-navbar-transparent – transparent background color
.nk-navbar-white-text-on-top – white text when menu on the top of page (not sticky)
For Reference .. https://nkdev.info/docs/godlike-html/template-structure/side-navigation/
In this website, top side of the picture is consumed by the black menu bar. I would like to place an empty <div> to push the picture downwards. <div> height needs to be resized automatically to prevent blank space from appearing in different resolutions.
I tried adding empty <div>s, using vmin/vmax, didn't work.
JSFiddle link
menu bar
<header id="header">
<div class="top-bar">
<div class="container">
<div class="row">
</div>
</div><!--/.container-->
</div><!--/.top-bar-->
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
</div>
<div class="collapse navbar-collapse navbar-right">
</div>
</div><!--/.container-->
</nav><!--/nav-->
</header><!--/header-->
The image is used as 'background-image' on a div with a fixed size. Some advantages are loading time and that the image can not be selected or dragged. A disadvantages the inflexibility. It's not that the black bar overlaps the image, as you can see when inspecting the element, but it's the div itself that cuts off part of the image. The best thing you can do is only use header images that exactly fit the container or you can play with the CSS background-size. Have a look at cover, but know that cover does not work in older browsers.
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