The WP responsive theme I'm working on:
http://www.wpexplorer.me/tetris/
I use Firebug for Firefox browser addon thingy to make changes before messing with the actual files. So if you have it or something similar, you will see that by adding position:fixed; to the #header section the header width shrinks well more than half its original size and the navigation menu is jacked up within the new shrunken space.
I have added other snippets of coding to the #header section like width:100%;, width:959px; and other percentages and pixels, which messes up the layout; especially when you resize the window down to what you would consider to be for a tablet and a mobile device - it's all out of whack. I can't get the sticky header for this theme to function or do right. Oh, I've also added z-index:200; to the #header section and margin:160px 0; to #main-content; these don't give me issues.
Adding the width: ; code to the #main-content doesn't seem to help either (which I read somewhere online that this was where the width code goes).
Anyway, does anyone know what code I need to make the header of this theme scroll up until it gets to the top of the page where it becomes sticky/static/fixed/on top (whatever the real term for it is) at all times? And, can you get it to work with the layout being in tact when the window is resized all the way down to the size of a mobile device?
Thanks.
This should work
#header-wrap{position:fixed;top:0;z-index:999;}
#pre-header{margin:20px 0 15px;width:960px;}
#main-content{margin:215px 0 30px;}
The position is fixed at the top using 0 with a z-index:999 you then need to set the width of the inner container pre-header 960px to match the rest.
You will need to setup the media queries for the other sizes you have setup. Easy, and Enjoy.
If you want the menu itself and not the social icons to become the top fixed bar without the social icons then you want to make a jquery scroll CSS change so that the #header becomes the fixed position.
It working with fixed header and social:
An illustration of it working without the social bar using a Jquery Scroll CSS change:
This is the way I would do it, I would move the menu down, and add the social icons to the menu itself. (Below is a screenshot of what I mean, the social icons are reduced to 75%)
PS. The social icons stand out to much so I would add a CSS3 Greyscale, and when the visitor hovers over them it turns on the color with a transition effect.
Hope this helps ;)
Related
Out of the blue, EVERY browser shows the same problem. The left-most column is squashed and refuses to expand. It makes it impossible to edit the template options. Any ideas? thanks :-)
This looks like a glitch with Shopify and would be better addressed by opening up a support ticket with their support team
Note: If you shrink your screen width to 599px wide or less, the sidebar should expand to be 100% of the window width - this might help if you're in a pinch and need to make updates right now
I've noticed that when I add an HTML app in Rally/Agile Central, the height doesn't fit/adjust within the browser windows. This means that a vertical scrollbar is always added.
I'm using Chrome and Firebox, but they both have this problem.
Is there a way to limit the height of the custom app?E.g., to (height - 25) so that the browser scroll bar is not necessary?
Can you share some of your code? It might help in diagnosing what's going on. A couple ideas though...
Are you using a layout for your app? This often can help with scrollbar issues.
This guide may be helpful for learning to work with layouts: https://docs.ca.com/ca-agile-central/saas/apps/2.1/doc/#!/guide/layouts
If you're just using auto layout (the default, if you didn't explicitly specify one) then you can also try adding autoScroll: false to your app's config. Note this may cause your content to be clipped if you do actually need a scrollbar though.
Here is an examle with the std list app - and it's the same whether there is anything to show or not.
I'm thinking that it is the HTML app that doesn't take into account that there is a page title, in this case "*test layout scroll bars" - and somehow uses the "full height" = the entire frame (I'm not an html/css expert)
I am using bootstrap 3 for a webapp that I am building, normally when building a website I would either want my page centered (default .container) or have it on a total page width (.container-fluid). In other words the grid system would be a vital part of building the page. With this app I am more interested in using it for everything else but if I can make it work the way I need it, it would be a huge plus.
The app that I am building now does not need the bootstrap grid perse as it has a specific use case at a minimal screen resolution, the app does not have to be scaled for tablet or even a phone.
Just to give you a mental picture, I've build a custom navigation (75px width) that is stuck to the left side of the page. What I would like to have is to have the .container grid system NOT centered but aligned to the menu on the left.
I want something like this
I know that .container-fluid technically takes care of the MOST part of so that is NOT what I am asking.
The design that I currently want to build is based on the .container centered grid and not the fluid one.
Does anyone have some tips on how to modify bootstrap to make it work the way I described?
Think I'm missing the obvious here, but I have a Bookstrap 3 navbar that works great in desktop view but as I squeeze the width and it gets to tablet size rather than collapsing into the toggle menu it's jumping the menu onto two lines:
http://www.doorsets.org.uk/
I've tried reducing the text size in the navbar via a media query but that isn't solving it.
What am I missing?
Appreciate it. Thank you.
NJ
One solution might be to change the point at which the navbar collapses, you can do this by creating a customized Bootstrap and setting the #grid-float-breakpoint to a larger number.
This variable unfortunately also influences the dt and dd inside a .dl-horizontal which might be a problem.
If you want to use a media query to reduce the font-size you can use the .navbar-default .navbar-nav > li > a selector. It however needs to become 9px at the smallest viewport size to still stay on a single row which is quite unreadable.
From the Bootstrap documentation:
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
It goes on to say:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
I'm using Font-awesome in my project, and every icon is aligned in the middle of the line. On Chrome, Firefox and IE, They are aligned corretly, but on Safari, the icon drop around 3 or 4 pixels.
I inspect the icon and in every browser, they are render and ocupate the exactly space they should be. But in Safari, they are rendered with extra top size, a transparent padding on top of the icon. It's not vertical-alignment or line-height problem, the character itself have this "transparent padding" on top.
That seens silly, but on a huge project, every icon is aligned 3/4px down than it should be give me a lot of headache.
One possible reason is that you have a different default line height in the different browsers. Try explicitly setting this to see if if it makes a difference:
CSS
i{
line-height:20px;
}
or even
i{
display:inline-block;
}
depending on the specifics of your styling, you might need to also set a class on the i tag, e.g.
i.icon-class{ ....}
Good luck!