I am trying to get a horizontal menu to be fixed in its current position so it doesn't move when you scroll in both regular view and also responsive view.
I tried researching how to do it but couldnt seem to have luck in making it work.
This is on a Wordpress site,
This Wordpress Site
There are a few styles with !important that are holding you back. Namely position: relative !important; and width: auto !important;
Try adding (or separating out) these styles to this class:
.responsive nav.art-nav, .responsive .art-nav-inner {
position: fixed;
width: 100%;
}
Ideally just on the nav not .art-nav-inner i don't know what that is affecting
Go into your 'style.css' sheet (there are several ways to get to it) and add this to the bottom:
.art-nav, .responsive nav.art-nav, .responsive .art-nav-inner {
position: fixed;
width: 100%;
}
Few things this does:
1. Fixes your menu in place on scroll.
2. Extends your menu to full width of the screen (just looks a little better.)
3. Does this all screen sizes (desktop, tablet, and mobile.)
Hope that works for you.
Related
So I have two tabs, I used mui tabs for that. For the first tab I display the ingredients, in the second tab I add new ingredients with different forms. I have different fields for each form so whenever I click on one form to open ( I use a mui split button to select and open different forms) , forms open with its width ( sometimes it jumps to center with smaller width, sometimes covers the whole tab). It looks bad. I want to make it a fixed size like 500px then everything looks good. But then for mobile usage or in different small-size components (I want to reuse the who tabs component), 500px doesn't look okay. I need to scroll to see whole form. I tried 100% or fit-content didn't work. My CSS looks like this now.
#formContainer {
width: 500px;
height:480px;
margin-top: 20px;
}
#media only screen and (max-width: 800px) {
#formContainer {
max-width:fit-content;
height:fit-content;
}
}
I am not good at CSS so maybe I am missing something basic? I try to look for it but I don't even know how to search about my problem. What would you suggest? Thanks
It's a little difficult to know exactly what you are going for. What I did on one of my angular projects is using a fixed position with a percent value
#formContainer {
position: fixed;
width: 500px;
height:480px;
margin-top: 20px;
}
you also may want to change it to be a class and not an ID since it will be re-used in more than just a single element.
Secondly, you can keep your current values, but also use max
#formContainer {
width: 500px;
max-width: 50%;
height: 480px;
min-height: 50%;
margin-top: 20px;
}
For some reason min-height seems to do the same as max-width.
I'm not a CSS expert so hopefully you can get a more precise answer on the hows and whys. I am simply a fellow sojourner suffering in the world of CSS.
I am having an issue with the mobile version of a site. I have managed to get the navigation to stay at the top of the page, but the logo moves down as the user scrolls.
I have tried various suggestions I have found on here and other sites including:
#masthead .site-header {
position: relative !important; }
#sticky_navigation {
position: relative;
top: 0;
}
These are all within a media query for mobiles.
I am pretty new to code, so I'm sure it's probably a rookie error!
This is a link to the site. http://coppercatphotography.co.uk/demo/wordpress/
Thank you!
The reason that your logo is moving down with the page is because your declaration .container_16 .grid_5 has position: fixed. You'll need to remove this or overwrite it. You could do:
#sticky_navigation .container_16 .grid_5 {
position: absolute;
}
That should overwrite it and resolve your issue. (I have used absolute instead of relative as relative seems to affect other elements on your page.)
This wordpress website http://www.sulu13.net/14 has a responsive logo and menu that I wanted centered in order to line up with the edges of the content below in the posts. So I added:
.tc-header .brand a { /* Logo */
position: relative;
left: 200px; }
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
left: 380px; }
Upon adding this CSS, the screen gets a horizontal scroll bar and has white space (equal to the left: 380px) on the right side of the screen. Something tells me it has to do with the responsive menu button sharing the same classes, .navbar .navbar-inner as the non-responsive menu. I would change this, but my knowledge of PHP is limited so I wouldn't know where to start.
I've tried removing the JQuery menu itself, but this had no effect, (my guess is..) because I didn't actually remove the responsive menu button/menu.
Here's the main CSS file - http://www.sulu13.net/14/wp-content/themes/customizr/inc/css/green.css?ver=3.1.6
Any ideas would be appreciated, thanks in advance for your time.
Ian
width:100% (default width) + 380px (left value) = 100% + 380px
You would need to resize the navigation to compensate for the moving over if you want it to leave it the way it is, meaning something like width:calc(100% - 380px);
However, I'd recommend not using absolute position to be more responsive and not require the manipulation of values.
Remove the left:380px
Apply this:
#menu-my-menu {
float:right;
}
This approach also allows more list elements to be added and they will automatically be positioned correctly
Use this:
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
}
So, remove the left:380px. I don't understand what you mean by centering the menu and aligning with the text below, as the container of the text is wider than the one of menu and logo together and if you align the menu with the post below it will not be centered anymore. But removing left property should give you what you want.
Thanks for the help guys!
I went back and gave it a closer look, turns out I was able to solve the issue with a wrapper and a few media queries for width adjustments.
I am using fixed layouts however when I see my layout in
android tablets and phones the layout is breaking for some
reason.
Please visit http://www.iamvishal.com/pureecn/
and notice the top navigation "open account, customer support and select language"
In the desktop it looks fine however the top navigation breaks in mobile browsers.
I am suspecting its the margin them.
#main_links_list_1,#main_links_list_2,#main_links_list_3
{
margin-right: 65px;
position: relative;
}
Pretty much things are breaking because you have half of your layout "fixed" and the other half "fluid".
For example:
div.section {
margin-left: auto;
margin-right: auto;
width: 960px; /*fixed*/
position: relative;
}
#main_links_container {
float: left;
width: 80%; /*fluid*/
}
Also note that when no width is set for an element, the default is auto.
Open your site on a desktop and try resizing the browser window you will probably see the same issue that you're seeing on mobiles and tablets.
If you really want to avoid media selectors you could try changing this-
html, body, #page {
height: 100%;
}
To something like this-
html, body, #page {
width: 1200px;
margin: 0 auto;
}
Use a media query in your CSS for greater control on mobile devices-
#media screen and (max-width: 767px) {
#main_links_list_1,#main_links_list_2,#main_links_list_3
{
margin-right: 15px; // reduced amount for mobile devices and tablets
position: relative;
}
}
Ensure this is BELOW the current CSS otherwise it will get overridden
There are a lot of reasons your site could be off in mobile/tablet.
1 ==> Create a fluid layout for non-desktop
2 ==> Make sure your meta viewport is correct (include retina display and Android dpi)
3 ==> Optimixe your images for mobile
4 ==> beware of position:fixed on older iOs and Android devices. Does not work as expected.
Can you explain a little better what is breaking?
You assumed wrong. YOu need responsive layout and not fixed!
I suggest you take a look at zurb foundation v4.
Your problem may be cause in the section Professional Solutions the last link is quite long, which breaks the layouts.
Try this in your css file:
#professional_solutions_list {
max-width: 180px;
width: 100%;
}
see the following screen to get what I meant (the red line is where your menu should reach, the blue line is where it is actually):
Update
The following state is the default one, with the problem as occurred in tablets, please notice the applied rules:
And this one after adding max-width: 180px, the problem is solved:
I edit the css rules live, using FireBug
EDIT:
Upon your comment, I've checked the website again, please remove:
width: 94%;
from the div with the id: secondary_links
Although a responsive layout like zurb would be advisable - the quick fix lies in applying a
min-width: to your page-wrapper element
I have the following CSS:
#middle {
float: right;
width: 590px;
height: auto !important;
min-height: 100%;
height: 100%;
}
My goal is to get the #middle div to extend all the way to the bottom. This code works perfectly in FF but does not in WebKit browsers. I've figured out that this is due to the float: right property, without floating, this issue doesn't persist
In WebKit browsers, it looks like min-height is being deduced and permanently set on the #middle div. This can be viewed by loading the page with the window contracted and then expanding the window to a larger size.
Here is a demo site of the issue: http://staging.similarblue.com/about/beliefs/
I realize I could use some JS to handle this (on window resize) but I was wondering if there's a pure CSS alternative.
Here is a screenshot of the issue: http://i56.tinypic.com/s49e37.jpg
Thanks!
Two lines up in your style.css file there's a height:auto!important declaration, which is overriding your height:100% declaration. Without that line, your site looks fine!
What you may be looking for is this. It's served me well in the past, hopefully it helps you!
What you could do is make the background div:
position: fixed;
top: 0;
bottom: 0;
And then put the content in a separate div on top of the fixed background. Here's an example: Demo
EDIT: accommodated scroll.