Here is my codepen: Codepen
.sidebar{
width: 100%;
position: static;
display: block;
padding: 50px;
margin: 0px;
height: 562px;
border: none;
border-top: 1px solid black;
margin-bottom: 5%;
}
I set a media query to change the styles of the page when under 700px. I want all of the :hover styles to go away on the top navigation, but I cannot get them to go away.
Also, I'm having a problem with the .sidebar element and the fixed footer overlapping at the bottom. I added margin to the bottom of the body and that didn't fix it.
Any suggestions please?
Just put the :hover rules into queries like this:
http://codepen.io/anon/pen/pjNRam
#media (min-width: 700px){
nav ul li:hover{
background: #e92121;
color: #fff;
padding: 10px;
font-size: 22px;
}
}
All you need to do is add the:
nav ul li:hover
inside the media query.
The selector is a bit too specific, you should avoid it or you're going to have problem in override stuff later in the project. As well try to use class.
Related
I am pretty new to web designing and upon doing some exercises, I encountered this problem: My nav tag was also hidden when I set header tag display to none. I tried adding display:block and clear: display to nav tag but did nothing. I read that position: fixed is hiding nav tag but as much as possible I do not want to remove it. I have not studied javascript yet, but let us say I did it with javascript, will the same problem occur or not? Please help me with this and suggest better ways to do it. Pardon my ignorance.
Here's my code for reference:
#header{
padding: 1.5px 0px;
font-size: 30px;
margin-top: -3%;
margin-bottom: -4%;
display: none;
}
#nav{
display: inline-block;
text-align: right;
position: fixed;
background: red;
width: 100%;
height: auto;
display: show;
}
Try to add this CSS style :
#header{ position:relative;}
#nav {display: block;}
If you go here you will see at the very bottom a light gray box that says "Partners". While the site is in full screen mode everything looks correct but when you edit your browser and make the width smaller then it switches to have an image on each line. It appears to happen when the max-width of the DIV gets below 1000px which you can see from the below I have the CSS set to be a max-width of 1000px or 95% of the browser width. Any ideas on how I can fix this?
.footer-full-row {
padding-left: 20px;
width: 95%;
max-width: 1000px;
margin: 0px auto 0px auto;
color: #fff;
background:gray;
}
In your responsive.css file, you have media queries that set all img elements to display: block;. You could override that using something like
.footer-widget img {
display: inline-block;
}
If I understand you right, you want the images to not display in a separate row each, so you need to add this css property to .textwidget img :
.textwidget img{
display:inline-block;
}
This will make it wrap anyway,in order to leave the size of the images as is, but you'll not get each picture in a separate ligne, it'll be wrapping according to the need of the page.
In your style.css change:
#footer .textwidget {
background: none;
margin-bottom: 26px;
padding: 0px;
overflow: hidden;
}
to this:
#footer .textwidget {
background: none;
margin-bottom: 26px;
padding: 0px;
overflow: hidden;
display: flex;
}
My issue here is that I have my nav-bar set to fixed, so it follows the window and sits at the top of the page wherever they are, but when the page width is decreased the rest of the navbar items get cut off and I can't scroll to see the rest of the items. I already have a min-width set so it stops at a certain point. So when the page width is decreased I want user to be able to be able to scroll around the page and be able to see the rest of the nav-bar, not just the part that fits the page. Here's what I mean (Watch the nav-bar): http://gyazo.com/513ad98520c9821c1de640b8c1d28fdd
Do you see how I'm unable to scroll to see the rest of the navbar items when width is decreased? When I don't have the nav-bar set to fixed, it works just fine (But I need it to follow the top of the page, as to why It's fixed).
Here's some of my navbar CSS:
nav{
min-width: 900px;
position: fixed;
background-color:white;
width: 100%;
}
nav img{
display: block;
margin: 0 auto;
width: 25%;
padding-top:5px;
padding-bottom: 15px;
}
nav li{
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
display: inline-block;
padding: 10px 50px 0px 10px;
}
nav a{
color: white;
text-decoration: none;
}
nav ul{
margin: 0;
height: 30px;
background-color: black;
}
And here's the full webpage (Yes, I know I need to make the images smaller.)
http://cydronixweb.kkhorram.info/
Strictly hypothetically speaking you first start with a media query . something like :
#media only screen and (max-width : 768px) {
}
now inside the media query you change some styles like :
#media screen and (max-width : 768px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
since you've tagged the question only HTML and CSS .
here's the best resource on the web to create a CSS only , fully responsive menu.
Thank you.
Alexander .
This is a simple fix:
Add min-width: 100%; to body
That just ensures you don't get weird scrolling.
So i have not seen this problem before, so im not quite sure what to ask but..
I have a menu with is inside a container, i want it to float right, it does but just not all the way, i cant figure what is stopping it. so i need a little help here?
My <ul> is floating right like this:
nav > div div > div > ul.nav {
position: relative;
float: right;
z-index: 6;
}
but i think it eayser to see in this codepen
The problem is that an element in the .top-bar is too high. Specifically the .top-bar .lang. This has a padding for the top of 1px, causing it to overflow out of it's container. There are two ways to solve this.
The best way is to change the padding on .top-bar .lang.
.top-bar .lang {
padding: 0 10px; // this was 1px 10px 0
font-size: 9px;
border-right: solid 1px #2d2d2d;
}
And the easier way is:
.top-bar .container {
overflow: hidden;
}
As this causes the overflowing content to be hidden.
All that remains then is to remove the padding on the right side of the div collapse navbar-collapse navbar-ex1-collapse.
You need two changes -
Add clear: right; style in ul.nav. I am writing the updated CSS -
nav > div div > div > ul.nav {
position: relative;
float: right;
z-index: 6;
clear: right;
}
Also, add the following CSS -
.collapse.navbar-collapse.navbar-ex1-collapse {
padding-right: 0;
}
Hope this helps :)
The problem coming from the following code.
#media (min-width: 1200px)
.container {
width: 1170px;
}
Your above code will assign the width:1170px to all the monitors which is more than 1200px. It means if I open your code in 1366px monitor, I can see the container with only 1170px;
Change your code according to your needs.
I am using the Gumby CSS framework. I am simply trying to change the height of the navigation bar from the default of 60px to 40px. In the _settings.scss file I have changed "$navcontain-height" to 40px but this has no effect at all, as far as I can see.
try setting
max-height: 40px;
i hope this will work
EDIT do not forget to update
min-height: 60px;
to
min-height: 40px;
OR you can just update min-height to 40px and then set height it will also work
try this,
// resize navbar height to 40px
.navbar {
min-height: 40px;
height: 40px;
}
.navbar ul li {
height: 40px;
line-height: 38px;
}
.navbar ul li > a {
height: 40px;
line-height: 38px;
}
// menu icon position when go to mobile mode
#media only screen and (max-width: 767px) {
.navbar a.toggle {
top: 0%;
}
}
at least it works for me, good luck