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.
Related
i'm working on FCC Technical Documentation Page and i'm having an issue, i'm trying to make this project mobile responsive, but i'm running into an issue where I can't seem to figure out how to move my left fixed nav bar and transition it to a top nav bar that is center aligned at anything below 920px, if you can be of any help I would appreciate it. I will link the project below so anyone can look at the code.
EDIT Finished making the project mobile responsive, might not be the most efficient method but it worked as i'm learning, click the link to view the code to see what I did that worked.
https://codepen.io/ochovj/pen/eYvwmYr
#media screen and (max-width: 920px) {
.nav-ul {
position: relative;
top: 0;
margin: 0;
padding: 0;
text-align: center;
float: none;
}
}
/* End of Responsiveness */
/* Nav Bar Container */
#navbar {
position: fixed;
width: 290px;
height: 100%;
top: 0px;
left: 0px;
border: 2px solid black;
background-color: white;
padding: 50px 0;
}
The easiest way would be to make your navbar list display: flex at the desired breakpoint:
#media screen and (max-width: 920px) {
.nav-ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
display: flex alone should do roughly what you want, but flex-wrap: wrap allows multiple rows if your elements don't all fit on a single line and justify-content: center will center the <li> elements inside the <ul> parent.
The list elements will need more styling, like padding, as they'll just be squished in a row together -- but this will quickly fix your position issue.
My wordpress site's menus are not showing correctly on mobile phone. When I tap on the menu and then select the sub-menu from it, the sub-menu doesn't open beneath the main menu (as dropdown) but it hides into the right-side. Sub-menus are working correctly on computer/laptop screen but creating issue with mobile phones. Here is the screenshot:
Following is the code for sub-menu column split:
.sub-menu {
width: 480px;
display: grid;
grid-template-columns: 1 1;
}
.sub-menu-columns ul.sub-menu li {
float: left;
width: 50%;
}
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
float: left;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
float: right;
}
Link of Menu Webpage: nawishta.com
On mobile devices (you already got a class for this) you can reset the width of your unordered list:
.mobile-menu .item-active > ul { width: auto; }
If it does not work, try adding a !important like width: auto !important;.
I've created a navigation list with plain and simple HTML and some CSS. It should be on the right side of the page and shouldn't move neither if there is a lot of content on the page nor if the user scrolls down.
After I added some sample text to my website I recognized that the navigation element is more in the left side. Why is this happening and how can I fix this?
This is the first minimal example with just some text:
https://jsfiddle.net/sck6nL6w/2/
And a snippet with some more text where the navigation list is more on the left side than in the first example:
https://jsfiddle.net/7Lsew6gg/3/
Note: Both have the same CSS styles defined:
ul {
list-style-type: none;
padding: 0;
width: 200px;
float: right;
margin: 0 5em 0 0;
right: 0%;
top: 5%;
position: fixed;
}
li a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
.navigation div {
margin-left: 60px;
}
#content div {
width: 65% !important;
}
Edit:
As #Autista_z mentioned the navigation bar gets moved when there is a scrollbar but I don't want to always show a scrollbar. Isn't there a better way to fix this?
as said by #Autista_z it's just because of scrollbar.
`https://jsfiddle.net/sck6nL6w/4/'
check this updates fiddle.
it's not fix but i want to show you how it's not an issue at all.
all i did is added this line of code
body {
overflow: scroll;
}
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.
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