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;
}
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 am a beginner in learning WordPress, and I tried to change the font for the top menu on my website, but I could not I added a code as it appears in the picture, but the font on the top menu has not changed. What can I do?
Website
my code:
#mainnav ul il a{
font-size: 40px;
color: #807f7f;
}
May be the font size is over written by other plugins / code. so if we use important property in code, that might solve the issue.
#mainnav ul li a{
font-size: 40px !important;
color: #807f7f;
}
And if you wish to change the font size in smaller device, add media query to do so.
/* When the browser is above 425px */
#media screen and (max-width: 425px) {
#mainnav ul li a {
/* Apply font styles */
}
}
/* When the browser is above 768px */
#media screen and (max-width: 768px) {
#mainnav ul li a {
/* Apply font styles */
}
}
I've created a responsive fixed Top Navigation Bar for a site I'm working on. I'm teaching myself CSS and as of this moment, I only have 2 weeks experience with the language.
Fiddle Link can be found here.
/* BASIC STYLE START */
body {
margin: 0;
background-color: #FFFFFF;
font-family: 'Titillium Web', Arial, sans-serif;
}
/* BASIC STYLE END */
/* NAVIGATION BAR START */
ul.topnav {
margin: 0;
padding: 0;
background-color: #2F2E2E;
overflow: hidden;
list-style-type: none;
width: 100%;
position: fixed;
top: 0;
}
ul.topnav li {
margin: 0;
padding: 0;
float: left;
}
ul.topnav li a {
margin: 20px;
padding: 0;
color: #FFFFFF;
overflow: hidden;
display: block;
text-align: center;
text-decoration: none;
font-size: 10px;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
}
ul.topnav li a:hover {
color: #B0AAA9;
transition: 0.3s;
}
ul.topnav li a.active {
color: #B0AAA9;
}
#media screen and (max-width: 800px){
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* NAVIGATION BAR END */
My issue is with aligning the links within the Nav Bar. I want to align the below accordingly.
Allegiance Title - Left side of Nav Bar
Home-FAQ Links - Center Column of Nav Bar
Register & Login Links - Right of Nav Bar
The problem I face is that I can't seem to actually manage to align them properly. I figured out how to change the class in HTML and move the Register & Login links to the right, but I can't move the Home-FAQ links to the centre. Also, when I do change values in padding / margin in the Nav Bar, the responsive Mobile menu changes with the links all over the place (non-centered).
I would appreciate any help as I'm very new to this. Also, please let me know if I have redundant code in the stylesheet.
Ultimately, I want to create one of those 3 column parallax scrolling sites with this Nav Bar sitting on top. I was going to use a downloaded template, but there is no point as I won't learn anything.
The issues are:
You cannot have a <div> directly inside <ul>. It's totally invalid.
The rule ul.topnav li.right, ul.topnav li is contradicting with float: none;
What you need to do is, create this rule:
ul.topnav li {float: left;}
You should be all set. If you need parallax scrolling, it definitely requires JavaScript.
Preview
Fiddle: https://jsfiddle.net/9go9x2ug/
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
I have this html that I cannot edit:
<div id="menu">
Home |
Meet Our Physicians |
Services |
</div>
I have to make it responsive and when when on mobile I want to delete the |
How can I target it? Something like:
#media screen and (max-width:480px){
element{
display:none;
}
}
Try this:
#media screen and (max-width:480px) {
#menu > a{
margin-right: -10px; /* getting the elements closer */
}
#menu {
color: transparent; /* making the open text's color transparent */
}
}
Working Fiddle
The only way to emulate this (CSS cannot target text that is not part of an element, unfortunately), is to target the containing element and then override the styling in the descendant <a> elements:
#media screen and (max-width:480px){
#menu {
font-size: 0;
}
#menu a {
font-size: 16px; /* or whatever */
margin: 0 0.5em; /* or whatever, to restore some spacing between elements */
}
}
Edit:
Maybe something like that:
#media screen and (max-width:480px){
#menu {
text-indent: -9999px;
font-size: 0px;
}
#menu a {
text-indent: 0px;
font-size: 14px;
}
}