I am trying to make Advance search bar. I am using this template https://bootsnipp.com/snippets/2q81r.Everything is working fine only problem is, Search bar and dropdown menu is not full width 100%.I want dropdown menu cover full width of search bar and must be responsible.
In this template width of search bar and dropdown is fixed in pixel.
Only delete or comment the width property
#media screen and (min-width: 768px) {
#adv-search {
/* width: 500px; */
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
/* min-width: 500px; */
}
}
Instead of having something like:
searchbar{width: 500px}
Try using max-with to make it responsive:
searchbar{max-width:100%}
For the dropdown menu add:
.dropdown.dropdown-lg .dropdown-menu {
width: 100%;
//rest of code}
Related
I have a problem with my navbar. I'm using Bootstrap for a responsive navbar but it overflows on the mobile version of my site. I used overflow-x: hidden on body and it solved the problem for larger versions but not the mobile version. I've checked for margin/padding issues on all my elements in the navbar but can't seem to find the problem. You can see the issue on www.tcbarringerphotography.com on the right hand side if you view it smaller than 500ish pixels. Any ideas?
Your problem is with width of two classes that you are using in your footer
social-media
blog-posts-link
#media only screen and (max-width: 1040px) {
.social-media {
width: 100%;
}
.blog-posts-links {
width: 100%;
}
}
Reduce the width to 90% at media screen max-width: 576px;
#media only screen and (max-width: 576px) {
.social-media {
width: 90%;
}
.blog-posts-links {
width: 90%;
}
}
mark as answer if it works thank you ;-)
Im working on a search bar for a website, on a laptop screen/computer screen the search bar width seems fine. Next I want to also make the search bar mobile, tablet responsive as well, im trying to do something below using #media tag, but doesn't seem to be working. when I apply below and I open my website url on a mobile the whole page shrinks adding white spaces, please advice, how to apply the media property?
Below is my code.
.form-search{
width: 50%;
margin-left:auto;
margin-right:auto;
}
#media (max-width:480px) {
.form-search {
width: 60%;
margin-left:auto;
margin-right:auto;
}
}
make sure you add .form-search to the input box like below..
<input type="text" class="form-search" />
Try setting a height for the form element. Try modifying your code to something like this:
.form-search {
height: 150px;
}
#media (max-width:480px) {
.form-search {
height: 70px;
}
Use calc css, and substract other elements width and margins from it.
//if for example search button takes fixed 80px on screen:
.form-search {
width: calc(100% - 80px);
}
I am super new to Bootstrap so please forgive me if I am just not getting it.
This is more of a design decision question than a technical question but I noticed in the bootstrap dashboard examples Bootstrap 4 dashboard example on a small device there is no way to navigate through the application as the left menu completely collapses and there is no + to expand the navbar. On the 3.3 version here: Bootstrap 3.3 dashboard example when the device is very small there is at least a + that allows you to expand the top navbar but still all of the options on the vertical menu on the left are completely lost.
Without the menu on the left it seems to me that the application would be unusable. Am I missing something?
Default sidebar display in Bootstrap example is hidden display: none;
And for screen width > 768 px #media (min-width: 768px) {} they show this block.
You can do it yourself..
Here is original Bootstrap code:
/* Hide for mobile, show later */
.sidebar {
display: none;
}
#media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
I am having an issue on a mobile version of a website where the dropdown menu doesn't appear completely in view because of the position of the particular menu item and the amount of items in the dropdown
The image below is how i would like it to appear, so it would focus the area when the parent is clicked.
Would it be possible to have it so the menu scrolls down to show all the sub items when clicked ?
You can view website at http://www.ndb.ie/2016/. It's using the standard Bootstrap menu code.
You should override bootstrap style.
.navbar-collapse.in {
overflow-y: visible!important;
}
Put this CSS in your style.css file
For Center Menu in Responsive
#media only screen and (max-width: 767px) {
.nav-justified > .dropdown .dropdown-menu {
left: 50% !important;
margin-left: -80px; /* (Half Menu Width in margin left) */
top: 100%;
}
}
For removing Scroll in Responsive
.navbar-collapse.in {
overflow-y: visible !important;
}
I had a quick question regarding twitter bootstrap navbars. I'm attempting to change the width of my navbar to only occupy 80% of the page width and centered on the page.
I've tried setting the width of .navbar, .nav, .navbar-collapse to 80%, all either doing nothing or shrinking the navbar way too much.
Link to the code:
http://pastebin.com/fHWJfYTL
Thanks for your help.
Here are the selectors (media queries) used in BS3, if you want to stay consistent:
#media(max-width:767px){}
#media(min-width:768px){}
#media(min-width:992px){}
#media(min-width:1200px){}
This is still accurate as of version 3.1.1
Demo
css
#media(max-width:767px) {
.navbar {
max-width:80%;
margin:auto;
/* float: left; or right as you want and then remove margin: auto*/
}
}
#media(min-width:768px) {
/* add here also if you want to have big menu 80% width */
}
#media(min-width:992px) {
/* add here also if you want to have big menu 80% width */
}
#media(min-width:1200px) {
/* add here also if you want to have big menu 80% width */
}
Try This:
.navbar {
margin: auto;
width: 80%;
}