On this website, http://usher1f.org/ , in mobile view or in a view when the browser is narrowed to 800 px width, the navigation sits off to the left. How can I make the navigation be centered horizontally?
The usual way to center something using CSS is to set the width to some value, then set the left and right margins to be 'auto', in the case of your site, the following should be included in the #cssmenu CSS rules:
#cssmenu {
width: 451px;
margin: 0 auto;
}
Related
I want the main nav menu to be at 1 line on all screen not only big screens, and i want the home page to be 1 page static with no scroll only cover and footer.
This is the site: http://alaa.x10host.com
I have tried so many ways, like display flex and width 100% for container and for nav menu, but I tried alot and nothing works
display:flex;
width:100%;
font-size: 1vw
A full 1 static page no scroll and full menu on all screen sizes.
As for the menu - add this line to your css
#media (min-width: 960px)
.row .primary-menu-ul>li {
width: inherit;
padding: 10px 0;
width: 20%;
This will tell all li elements that they cannot be more than 20% of their parent element and since you have 5 menu items they will always take 100%.
as for the scroll - you need to adjust ALL sizes related to paddings and margins from px to % / em and get rid of the min height css rules for inner container (I am referring to the one with background image). Like here:
.elementor-159 .elementor-element.elementor-element-1dd43d0 > .elementor-container {
/* min-height: 34vh; */
}
I commented out this rule. Also saw some paddings set up in px as well as font sizes. Main issue with this website that inner container is not 100% responsive that's why you may see vertical scroll on mobile devices.
In the Firefox navigationbar I only have the back/forward buttons on the one side
and the menu button on the other side of the urlbar.
Now I'd like to horizontally center the urlbar on the remaining space of the navigationbar with a custom userstyle.
In my css, I've added the following code:
#urlbar {
width: 800px;
margin: 0 auto !important;
}
But that doesn't work. Can you maybe point me in the right direction?
Thanks!
I think this is the right way to make the urlbar a fixed width (it's how I have set it on my profile):
#urlbar, #urlbar-container {
min-width: 250px !important;
max-width: 550px !important;
}
Don't know how to make the urlbar centered in the navbar through userchrome.css, but you can achieve the same result with Classic Theme Restorer Extension (or any other that lets you customize the navbar with flexible spaces).
I have a footer on a webpage that has another div with some content in it (that content is centered withing the footer container). The footer is set to stretch the entire width, while the content div inside is set to 960px and has a margin auto to center it.:
Html:
<footer>
<div class="footer-inner">Content</div>
</footer>
css:
footer {float: left; min-width: 100%; background-color: #000;}
footer-inner {width: 960px; margin: 0px auto;}
The footer does span when full size, but when I resize the browser and side scroll it no longer stretches across full width, but gets cut off:
Screenshot: http://cl.ly/image/1r2T2h3K3Z1A/o
site: http://southland.dcsam.com
Any help is appreciated. I'm searched and read and searched and read, and now defer to you fine folk. ;)
Something is causing your page to stretch to a minimum of 1160px (I'm not sure exactly what it is and don't have time to figure it out, but my best guess is that it's somewhere in your nav or slider). So with a width or min-width of 100%, it only stretches across the window (the same is true of your other 100% color bars like nav). When the window is less than 1160px, your footer will also be less than 1160px. If you change your css to what I have below, it will always stretch the full width of the site:
footer {
width: 100%;
min-width: 1160px;
}
For the following site: http://mountainfoodstorage.com, when the window is maximized (wider than about 1520px), the page displays correctly. But if the window is thinner than about 1520px, a horizontal scrollbar appears, and if I scroll to the right, my layout appears messed up (divs that are supposed to span the whole width are cut off). The content of my web page is only about 1000px wide, so the horizontal scrollbar is kicking in about 500 pixels too early. I've inspected the page's elements to see if anything is bumping up the width to around 1520px, but I can't find anything that's doing this. Any ideas?
it's the #main-menu, width + left = 1250 instead of your site width. Remove the left style and add float:right to the ul
#main-menu {
position:relative;
left:265px; /* remove this */
width:985px;
margin:0 auto 0 auto;
}
#main-menu ul {
margin-left:0;
float: right; /* add this */
}
Add html, body {overflow-x: hidden;}?
I found some great help on this site that helped me tile an image on either side of my fixed header. One issue I am having is the scroll bar on the right is being covered by the tiled image and becoming inaccessible. I am sure it is something simple but I am at a loss at the moment. You can view an example here: http://www.jzandecki.com/example
You'll need to rebuild your header from scratch. First of all create a div (this will be your header container), name it with id let's say "header". Add as a background your tiled black image. The position of that div should be FIXED and not ABSOLUTE.
position: fixed;
background: url("../images/example_top.jpg") repeat scroll 0 0 transparent;
background-repeat: repeat-x;
height: 178px;
width: 100%;
In your header div add another div having for width size the width of your power plant image. Set the css of this div to margin: auto (to center it in the screen).
margin: auto;
This should do the job.
If this works you should have the same view you had before but your scroll bar will be on top of your header and not hidden.
Edit:
By the way I saw your body is 900 px and sticks on the left of the screen. I recommend you to have the following attribute for your body:
margin: 0;
padding: 0;
The body should occupy the whole page.
If you want a 900 px wrapper block for your content add a div AFTER your header div (described above). This new div should have the following css attributes:
width: 900px;
margin: auto; //this centers your div in the middle of your screen
//Other styles that have nothing to do with positioning
Good luck.