I have a header and is overlapped on navbar. I liked it that way.
but problem is, when I go on site from smaller devices navbar-toggle increases navbar size how to fix this.
my temp website
rank.inserver.in/starofdavid
just try to minmize your browser.
Because your button is outside the navigation header like this:
<nav>
<div class="navbar-header">
<div class="navbar-brand"><div>
</div>
<button></button>
</nav>
Change it to:
<nav>
<div class="navbar-header">
<div class="navbar-brand"><div>
<button></button>
</div>
</nav>
You could also use css media query to style mobile or tablet view
Media Query
Related
i would like act a div as overlay sidebar only on mobile device. Other than mobile device it should act as normal div.
Sample Code:
<div class="row">
<div class="col-lg-3" id="sidebar">
overlay sidebar only on mobile device
</div>
<div class="col-lg-9 col-12">
</div>
</div>
how do i make id="sidebar" act as normal div and sidebar on mobile device.
you can achieve using media query
#media screen and (max-width:767px){ //targets the mobile devices
#sidebar{
/*css code goes here*/
}
}
The best way would be to use jquery to collapse its width when the size for mobile screens has been attained
You should use d-block or d-none property like this:
d-sm-none or d-sm-block
I'm trying to modify a bootstrap template to add a full length 1200 px banner at the top, instead of the smaller 120 x 60 images/logo-company.png logo that is there on the original site.
I have tried to no avail, but I would like to be able to seat this larger banner perfectly for desktop view, while having it be responsive on mobile devices.
I assume the original logo was so small that it didn't needto have code call outs to make it responsive.
Would anyone be kind enough to take a look and see if they can supply the necessary HTML and or CSS code to achieve this for me please.
original site.
http://jituchauhan.com/industrial/boxed-layout/industrial-darker/index.html
If background image isn't working for you here is a simple solution:
<div class="header-row" id="header-row" style="padding: 0px; overflow:hidden; height:100px;">
<!-- container-fluid is the same as container but spans a wider viewport,
it still has padding though so you need to remove this either by adding
another class with no padding or inline as I did below -->
<div class="container-fluid" style="padding: 0px;">
<div class="row">
<!-- You originally has it set up for two columns, remove the second
column as it is unneeded and set the first to always span all 12 columns
even when at its smallest (xs). Set the overflow to hidden so no matter
the height of your image it will never show outside this div-->
<div class="col-xs-12">
<a class="navbar-brand logo" href="index.html">
<!-- place your image here -->
<img src="http://placekitten.com/g/1200/600" alt="company logo" style="width: 100%;">
</a>
</div>
</div>
</div>
</div>
You can set background image for header and remove/hide the logo image.
#header-row {
background-image: url(../images/logo-company.png);
}
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 am designing a web without meta viewport. I want to show my web on mobile as well as desktop.There is problem in the comperision of home(index) and inside page.Home page header and footer showing properly but on the inside page header showing good but not as well as home page and footer not showing properly in full width.Plz help me Thank you
there is problem only for mobile and tab
http://websum.in/prome/concepts.php
Please paste html code and css code other wise cannot full help you. And or your code show some example through codepen or jsfiddle I see you have not set any media queries for you need to set some media queries for mobile formats some where along those lines you should look into bootstrap to see how they are done.
I had a look in firebug on your website could not see any media queries
Example only
#media (max-width: 648px) {
.footercontainer {
width: 90%;
}
}
Edit: just realized you didn't say you use Twitter bootstrap. This example requires Twitter bootstrap, or you could fetch the Css classes from there.
What you could do is make sure the text blocks in the footer appear centered and underneath each other on mobile. Something like this:
<div class="footer">
<div class="row hidden-xs">
Desktop footer
</div>
<div class="row visible-xs">
<div class="col-xs-12 text-center">
Icons and stuff.
</div>
<div class="col-xs-12 text-center">
Copyright.
</div>
</div>
</div>
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.