I am creating a menu bar with w3-css. The menu bar should be fixed to the top.
Here is an example, please try to decrease screen width:
https://www.w3schools.com/code/tryit.asp?filename=FEZ9Z1BYNTEX
The problem is, when screen width is set to narrow, and the menu wraps into more than one lines, it covers the first lines of text. Is there a way to solve it somehow?
You can solve this issue by using a media query. Media queries allow you to apply CSS to a site at a certain screen size. For example:
#media (max-width: 650px) {
.w3-container {
padding-top: 40px;
}
}
This CSS pushes the container down at smaller screen sizes so that the menu will never cover up the text below it. Alternatively you could use a media query to make the menu text smaller or hide certain parts of your menu when it gets to smaller sizes.
Most people switch to another form of menu for mobile devices such as a Hamburger menu. This isnt needed to fix the problem you are currently facing but you might want to look into it for your future projects.
Set .w3-top to position sticky instead of fixed. Then remove margin-top from the body.
https://www.w3schools.com/code/tryit.asp?filename=FOC96ENPLRNO
Related
Site URL: http://www.digisalud.org/desarrollo/dona/
Hello!
Please, I am using DIVI Theme and I need to make these settings in the navigation bar:
NAVIGATION BAR:
The PLATFORM button on some laptop screens is shown on the down line of the navigation in screen with size between 1056 and 1346 px.
When you place the cursor on the DONA button or on the PLATFORM button near its corners, the text is shown in white, this should appear in yellow or blue.
I show you the images with the sample of each problem. This site is already in production and I need to close these details with the client. I appreciate the help very much.
Regards
Adriana
At 1280px, for example, there isn't space enough to put all the elements into the same row.
If you inspect all the element's width, you'll see that the menu container must have, at least, 1030px of width to keep all the elements inline.
Obviously, like your menu container width is setted to 80%, when the screens size is, for example, of 1280px, the menu container have a width of 1024px (that, like I said, is not enough).
One solution can be to force the container to cover the entire width in those resolutions.
You can approach this using media queries.
Something like this:
#media(min-width: 1024px) and (max-width: 1366px) {
.container.et_menu_container {
width: 100%;
}
}
Snapshot with the Plataforma button hovered:
P.S: You can also adjust the paddings/margins of the menu elements (logo, menu items, buttons...)
I am new to bootstrap.I have a logo image(instead of project name) and a horizontal navigation bar on top of my page.Logo image is on the left side.When browser window is reduced navigation bar shrinks.
I have 2 problems:
(a)The menu that comes as drop down(when window size is reduced) overlaps the content area
(b)Menu comes below the logo image.The logo image is about 160px.(I think i may have to reduce the logo image size when window size is reduced).Can anyone tel me how to reduce image size or any other method to solve this!!
If reducing the image size in steps is going to solve your problem, then you could use media queries in your CSS to achieve this. For example-
#media all and (max-width: 480px) {
/* Reduce image size */
}
For a detailed description of media queries, check http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ or http://webdesignerwall.com/tutorials/css3-media-queries
I'm pretty new to css styling and I need help postioning DIVs in a layout. If a DIV tag is declared bottom of the page, when the browser width is reduced (to simulate as in a mobile phone), I require this DIV to be displayed on top. I know this could be achieved by assigning a minus value, but isn't there a better way of doing this?
Please have a look at the http://2010.dconstruct.org/speakers/tom-coates and notice that the content inside the right column is displayed before the main content when the browser width is reduced. I'm unable to find the solution through firebug.
Thanks.
They use media queries:
#media all and (max-device-width: 767px), all and (max-width: 449px){
// Code
}
If you want to know more about them, you can read, e.g., http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
I assume you're using a CSS #media query to condition different CSS rules on the width of the page already.
What I would do is, put the div in question before the main content in the HTML document, and above your width threshold, have it float: right. Then, below your width threshold, do not have it floating right.
I've adapted some CSS to use in a website and can't quite figure out why one aspect of the page is acting the way that it is acting. Basically, when I shrink my window below a certain size horizontally, all of the text "drops down". This becomes an issue if a user is viewing my website through an ipad with vertical orientation. You can view this issue here. I'm hoping to make it so that even if the window gets smaller, the placement of my text remains intact.
The problem is that the area does not have enough space to put both the side navigation and content on one line. Make it automatically adjust the page's width when it exceeds certain decrements of width. This code is an example, and it is highly unlikely for it to work. If I could see the CSS more clearly, then I could provide the exact code.
#media all and (max-width:960px) { /* Assuming the #wrapper is 960px across */
#content {width:560px;} /* As opposed to 720px */
}
Edit
The content drops down at exactly 980px, so you have to shrink the width after there.
#media all and (max-width:980px) {
#container {width:520px;}
}
div#content "drops down" because is set to be float:right which means when you resize the browser the content div to going to be moved with the flow of the page as it gets narrower.
try styling div#wrapper as white-space:nowrap and div#nav_left and div#content both white-space:normal
http://www.eco1furniture.ca/
When resizing the page down the main-menu goes to a 2nd line. I know this is supposed to happen with the site being fluid. But is there a way of keeping it fixed (on one line)?
Thanks,
Ken
You can make a few changes to ensure the menu doesn't wrap onto two lines under "normal" conditions, but I don't think you can ever be certain it won't happen. For instance, the menu width will depend on the browser zoom level, font and font-size.
Using my browser defaults, your menu is 865px wide. Taking the gutters into consideration, the max-width of the small-screen stylesheet should be 972px, so the drop down menu appears before the menu goes onto two lines. 975px would be a reasonable value to account for some of the idiosyncrasies of different browsers, but it still assumes the user is at 100% zoom, and using the font and font-size you've specified.
responsive.css - line 51
#media only screen and (max-width: 975px) {
Setting a min-width on the menu itself suffers the same problems and as you discovered causes the menu to extend out of the main wrapper.