I cannot figure out why my bootstrap dropdown menu seems to have an extra line on top and line on the bottom--with nothing in them. Granted, I have made my navbar 150px for all resolutions but that doesn't explain the extra padding on the bottom. This is my first bootstrap project and I have searched high and low for an answer to this. You have to narrow the window to less than 767 pixels for the dropdown option to appear.
This is the page: http://www.ashlandlockandsafe.com/index3.html.
In the CSS, I have tried to address it with the following:
#media screen and (max-width: 767px) {
.navbar-header{
height:150px;
}
.navbar-brand, .navbar-nav > li > a {
line-height: 30px;
height: 45px;
padding: 0px;
margin-top:0px;
margin-left:10px;
}
.well {
font-size:2.5em;
text-align:center;
text:#000;
padding:0;
border:#000 solid 4px;
background-image:url(../images/metal.png);
background-image:no-repeat;
background-size:contain;
background-position:center;
}
.carhelp {
margin-top:15px;
}
h1 {
text-align: center;
font-size: 30px;
}
.phonetxt {
font-size:36px;
text-align:center;
}
But it still has what appears to be an extra row on the top and bottom. Any ideas how to address the dropdown itself?
In website, fixed header has a padding .navbar-fixed-top .nav{60px 0px} causing the problem.
so solution is media queries
#media (max-width: 480px) {
.navbar-fixed-top .nav {
padding: 0px 0px;
}
}
so on devices like mobile, it will over-ride the default .navbar-fixed-top .nav selector property.
More information about media-queries
Related
I'm brand new to CSS so please forgive me if I'm missing something obvious. I've spent several hours on this and searched this website and have not been able to resolve my issue.
I have a Shiny (R) app that I am trying to add some custom styling to using CSS. I have been making change to the Navbar, which I am happy with so far. However, something in my CSS is causing undesirable behavior in mobile-sized screens, where the tabs of the navbar do not stack vertically and overlap with the main content:
Compared to the default, which is what I would like:
I know this is something related to my CSS because when I disable it this issue is resolved. I have tried many things and nothing so far has helped, I was wondering if someone might be able to point out in my CSS where I have introduced this problem and how I might resolve it.
Thanks in advance. CSS:
/*=============NAVBAR STYLING=============*/
/*Entire navbar*/
.navbar.navbar-default.navbar-static-top{
background-color:white;
height:60px;
/*margin: 10px;*/
margin:0px;
}
/*All navbar tabs*/
.navbar-default .navbar-nav>li>a {
/*Sets consistent height for navbar tabs, must be !important*/
height:60px !important;
justify-content:center;
align-items:center;
display:flex;
}
/*Style the *active* navbar tab*/
.navbar-default .navbar-nav>.active>a{
/*Make the active tab darker in color w/ white text*/
background-color:#676767!important;
color:white!important;
border-radius: 10% / 50%;
}
.nav-link {
position:absolute;
}
/*======Screen-width specific styling=======*/
#media (min-width:1276), (max-width: 1426px) {
.navbar.navbar-default .navbar-nav > li > a {
font-size: 12px;
}
h2 {
font-size:26px;
}
.hometext {
font-size: 18px !important;
}
ol {
font-size: 18px !important;
}
}
#media only screen and (min-width:768px) and (max-width:1275px) {
.navbar.navbar-default .navbar-nav > li > a {
font-size: 11px !important;
margin-top:10px !important;
}
h2 {
font-size:24px;
}
.hometext {
font-size: 16px !important;
}
ol {
font-size: 16px !important;
}
}
/* Next two classes keeps the navbar tabs on the same line in smaller windows */
.min-width{
overflow-x:auto
}
ul.nav{
display:inline-flex
}
}
#media only screen and (min-width:1px) and (max-width:767px) {
.navbar-default .navbar-collapse > li{
display: block!important;
}
.navbar-default .navbar-collapse > li > a {
float: none!important;
/*Removes grey line above tabs (overlaps with logo)*/
.navbar-default .navbar-collapse{
border-color:transparent;
}
}
I do not want to repeat the same property all the time on my CSS.
In my case, I have three media queries in which I change the property of padding of a specific element and after I need to put it as the beginning:
#media (max-width: 1000px){
ul > a{
padding-top: 20px;
padding-bottom: 20px;
}
}
#media (max-width: 750px){
ul > a{
padding-top: 16px;
padding-bottom: 16px;
}
}
#media (max-width: 500px){
ul > a{
padding-top: 20px;
padding-bottom: 20px;
}
}
As you can see, I have to put the same code on the first and on the third one media query and I would like to reduce the amount of lines of my CSS.
I would like to wrap these lines into a variable or something similar:
ul > a{
padding-top: 20px;
padding-bottom: 20px;
}
and use them in the whole CSS each time I need it.
I found that there is an experimental technology to create variables on CSS but that it has not been stabilized yet and it does not have a full browser support.
Thus, is there a method to use more than one line on CSS without repeating them?
Thanks in advance!
Just define the common rule without a media query and then use media queries to override it as necessary, like so:
ul a{
padding:20px 0;
}
#media (max-width:750px){
ul a{
padding:16px 0;
}
}
Alternatively, add min-width to your media queries and create a new one to define all the common rules in, like so:
#media (max-width:500px),(min-width:751px) and (max-width:1000px){
ul a{
padding:20px 0;
}
}
#media (min-width:501px) and (max-width:750px){
ul a{
padding:16px 0;
}
}
You could use one query with min and max width Fiddle, also only li element can be direct child of ul element (i used color instead of margin form demo)
ul a {
color: blue;
}
#media screen and (min-width: 500px) and (max-width: 750px) {
ul a {
color: red;
}
}
<ul>
<li>Lorem</li>
<li>Lorem</li>
</ul>
I have a dropdown menu on which links get bigger when the page is scrolled. This unfortunately then threatens to drop the bottom-most ones off the foot of the page as a result.
The site is http://www.jswhite.co.uk/
Does anyone know how to prevent this from happening?
your javascript code adding class "et-fixed-header" at header tag and in your css you using below code.
#media only screen and (min-width: 981px)
.et-fixed-header #top-menu li a {
font-size: 22px;
}
So after adding et-fixed-header class it changing menu text. change your css.
.et-fixed-header #top-menu li a {
font-size: 16px;
}
here is the problem
#media only screen and (min-width: 981px)
.et-fixed-header #top-menu li a {
font-size: 22px;
}
you used #media .. Try deleting this statement
you can also just paste this css code
.et-fixed-header #top-menu li a {
font-size: 16px !important;
}
set font size important to maintain it while scrolling
#top-menu li li a {
font-size: 16px!important;
line-height: 1.1em;
}
add overflow as scroll
#main-header .nav li ul {
background-color: #f1f1f1;
overflow: scroll;
}
Hello I am new with CSS
I think I have broken the CSS on my page
the logo runs off the page on mobile devices
if anyone could point me as to why this is not responsive?
thanks
check the site here http://finddaytrips.com/dev
Paul
---------------------------css below ------------------
.logo-wrap {
background:url(images/bg-header.png) repeat-x;
min-height:89px;
position:relative;
}
.logo-wrap:before {
content:"";
display:block;
height:100%;
left:-100%;
position:absolute;
top:0;
width:100%;
}
.logo-wrap:after {
content:"";
display:block;
height:100%;
right:-100%;
position:absolute;
top:0;
width:100%;
}
.logo-wrap:before { background:url(images/bg-header.png) repeat-x; }
.logo-wrap:after { background:url(images/bg-header.png) repeat-x; }
.logo {
position:absolute;
top:15px;
left:25px;
text-align:center;
}
#media (min-width: 768px) and (max-width: 979px) {
.logo { width:100%; }
}
#media (max-width: 767px) {
.logo {
position:relative;
top:0;
margin:20px 0;
}
.logo.pull-left { float:none;
}
}
.logo a {
filter:none !important;
background-color:#393939;
background-image:-moz-linear-gradient(top,#434343,#292929);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#434343),to(#292929));
background-image:-webkit-linear-gradient(top,#434343,#292929);
background-image:-o-linear-gradient(top,#434343,#292929);
background-image:linear-gradient(to bottom,#434343,#292929);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff434343', endColorstr='#ff292929', GradientType=0);
display:block;
padding:14px 11px 12px 11px;
border-radius:6px 6px 0 0;
}
#media (max-width: 767px) {
.logo a { text-align:center; }
}
.logo p {
background:#8ec63f;
border-top:1px solid #fbde02;
font:italic 34px/1.1em 'Orbitron', sans-serif;
font-weight:900;
text-align:center;
padding:0 5px 5px 0;
color:#2c2c2c;
margin:0;
border-radius:0 0 6px 6px;
}
#media (min-width: 768px) and (max-width: 979px) {
.logo p { font-size:16px; }
}
.logo .logo_h__txt { text-align:center; }
.logo .logo_h__txt a { padding:5px 15px 5px 5px; }
.logo .logo_h__txt a:hover, .logo .logo_h__txt a:active {
color:#fff;
text-decoration:none;
}
Your image is responsive! There is other parts of your code that are affecting the logo.
Unfortunately I will add that you should improve our skills in responsive design, even after I give you these changes to fix your logo, your site is just not working at certain sizes, your site needs some serious work for virtually every phone in landscape mode. Not only are there duplicate media queries, there is also media queries in your code for 760px (as well as 767px shown in your example) which doesn't look good if re-sizing a window and not good practice in general.
To fix the logo problem,...
You do not require the pseudo elements ::before and ::after on .logo-wrap.
You need to completely remove the absolute positioning of .logo as well as top and left.
You also need to remove margin from the .logo class in the media query "max-width: 767px".
To replace this spacing I would add padding: 10px; to the class .span4 on your page (which is not listed in the code above)
I do not believe you require <div class="spacer"> either! (also not in the code above)
Good luck in your site building.
Just add img-responsive to your logo image class like this
<img src="logo.png" class="img-responsive">
but use bootstrap
put the links on the header and the script source on the footer
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
See reference
http://getbootstrap.com/css/#images
I am creating a web site for a friend and is strictly practice for me. So far I have got the banner w/ logo to fit any screen, but now I am adding buttons so a user can navigate through out the site. When zooming in or out the buttons go all over the place. I am using an external CSS sheet to help format my HTML. Here is my CSS3 code
/* W & W Hydrographics, LLC. */
/* Robert W. Anderson HTML 5.0 */
.mybutton {
display: inline-block;
position: relative;
margin: 10px;
padding: 0 20px;
text-align: center;
text-decoration: none;
font: bold 30px/35px Arial, sans-serif;
box-shadow:#000 4px 4px 5px;
}
/* Our Gallery */
.gallery {
position:absolute;
left:5%;
top:5%;
color: #F5DA62;
background: #3F403D;
}
/* Available Patterns */
.patterns {
position:absolute;
left:300px;
top:230px;
color: #F5DA62;
background: #3F403D;
}
/* Contact Us */
.contact {
position:absolute;
left:650px;
top:230px;
color: #515151;
color: #F5DA62;
background: #3F403D;
}
body {
background-size: 100%
}
You can use CSS3 to find the width of the screen and adjust the size of the buttons(again, according to the size).Here is a small explanation of an example just so you can unserstand.Suppose I had a button with id #button with a 300px width like this-
#button{
width:300px;
}
If i wanted to change the width to 100px in mobiles(mobiles have average width 470px;) I can do it like this-
#media (max-width: 470px) {
#button{
width:300px;
}
}
You can use the same logic to adjust size of other elements and even multiple elements at the same time like this-
#media (max-width: 470px) {
#button{
width:300px;
}
#button2{
width:300px;
}
#someelement{
color:#C30;
}
}
If you didnt understand a part of my answer, just comment. I am free to answer more doubts.