http://www.kriesi.at/support/tags/fixed-position Support Forum - Tag: fixed position - Recent Posts en-US Thu, 23 May 2013 13:57:35 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/a-couple-of-more-difficult-changes-for-me#post-85563 Tue, 27 Nov 2012 13:43:10 +0000 Nick 85563@http://www.kriesi.at/support/ <p>You're welcome! Enjoy the theme and if you got more issues, we are always here to help.</p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/a-couple-of-more-difficult-changes-for-me#post-85552 Tue, 27 Nov 2012 13:10:17 +0000 silverwoodsweden 85552@http://www.kriesi.at/support/ <p>thank u so much for the help.<br /> The header bar is gone, the search bar is padded, the current page menu have Red underline on it,<br /> the CSS and fonts I need to study more on.</p> <p>I will get back so more people can learn from this thread, </p> <p>I will "close" this as soon as I fix the problems, and post them here.<br /> Thank u so much for your help Nick,<br /> Great service. </p> http://www.kriesi.at/support/topic/a-couple-of-more-difficult-changes-for-me#post-85528 Tue, 27 Nov 2012 11:06:53 +0000 Nick 85528@http://www.kriesi.at/support/ <p>Hi,</p> <p>3) to make the very top disappear please add this<br /> <pre><code>#shop_header { display: none; }</code></pre> <p>the code below will give some padding to your search form so its not touching the top and right corners (up to you)<br /> <pre><code>.search-form-header { padding: 10px 10px; }</code></pre> <p>The code below fixes the Swedish flag half hidden<br /> <pre><code>#top #socket .social_bookmarks { top: -2px; }</code></pre> <p>2) for styling the menu, please try the codes below, I used 3 colors and you can see what block changes what color ***You need to add all three blocks since some control the underline, others the menu item in various positions.<br /> <pre><code>#top .main_menu ul:first-child &gt; li.current-menu-item &gt; a, .main_menu ul:first-child &gt; li.current_page_item &gt; a { color: red; } div .main_menu ul:first-child &gt; li.current-menu-item &gt; a, div .main_menu ul:first-child &gt; li.current_page_item &gt; a { border-color: blue; } .main_menu ul:first-child &gt; li.current-menu-item &gt; a, .main_menu ul:first-child &gt; li.current_page_item &gt; a, #top #wrap_all .current_page_item &gt; a { border-color: green; }</code></pre> <p>4. Right now you home page has: Headers and the main text are Maco font, Main navigation is in Olbitron which doesn't work for me and instead serif is shown, then there is Helvetica that is shown instead of Helvetica Neue, And the 2 columns of links above the footer , the left column is in Georgia and the right one is in Helvetica.</p> <p>You need to start using Firebug, and the custom.css file is empty so I am not sure what you are worried about breaking. Add the code to Quick CSS and see what happens, then take it out.</p> <p>[example] </p> <p>Watch a 20min video on using CSS from youtube , there are many of them, but spend a full day figuring it out, its easy with Google Developer Tools and once you understand it , you will laugh at how easy it is.<br /> <pre><code>&lt;div class=&quot;a123&quot;&gt;&lt;p class=&quot;b23423&quot;&gt;Hello world!&quot;&lt;/p&gt;&lt;/div&gt;</code></pre> <p>the line above is html and you use the css to style it. The div you would use for positioning the paragraph for example, and the paragraph to style the font, color, rollover ... so the css below<br /> <pre><code>.a123 { display: inline-block; position: relative: top: 40px; left: 10px; }</code></pre> <p>the paragraph text is inside the div so you can references it directly if its used in one place .b23423 but you can also reference it by its parent tag (which is the div)<br /> <pre><code>.a123 .b23423 { font-size: .9em; color: blue: }</code></pre> <p>Nick </p> http://www.kriesi.at/support/topic/a-couple-of-more-difficult-changes-for-me#post-85330 Mon, 26 Nov 2012 08:06:32 +0000 silverwoodsweden 85330@http://www.kriesi.at/support/ <p>Hi </p> <p>thank you for the info Nick.</p> <p>I do have firebug, I can see the CSS; but have not changed anything in the custom.css yet since I don´t want it to "crash" .</p> <p>1) much better, now the searchbar is on the top RIght in the header. Used the .search-form-header {<br /> position: static;<br /> float: right;<br /> margin-left: 10px;<br /> }</p> <p>2) I want the words/letters of the MENu to turn red (as the logo ) when I enter that specific site, ie. if I am in "om oss" page it (the letters on the NAV menu) should be underlined and the colour should be change to the same red colour.</p> <p>3) the entire MENU on the grey background gone as well.</p> <p>4) I want to use the font that is currently on the right hand (kalendarium)<br /> and when I enter the &lt;p class=text342342"&gt; that u mentioned, where should I insert it?<br /> *where I insert the code directly or in a CSS? AND what should I put in the text25254? sorry I am pretty new to the styling.</p> <p>If I see something that I want to change in the CSS tha I see using firebug, should I just insert it in the quick css?? </p> http://www.kriesi.at/support/topic/a-couple-of-more-difficult-changes-for-me#post-85161 Fri, 23 Nov 2012 18:31:04 +0000 Nick 85161@http://www.kriesi.at/support/ <p>Hi,</p> <p>To position the search box, please add this to quick css *after* the css you used which you can remove. Quick CSS is located in Propulsion &gt; Theme Options &gt; Styling at the bottom of the page.<br /> <pre><code>.search-form-header { position: static; float: right; margin-left: 10px; }</code></pre> <p>or you can do it instead like this (just don't use both)<br /> <pre><code>#searchform { position: relative; top: 60px; left: -150px; }</code></pre> <p>That last one needs a media query for the iphone portrait size. We will return to it.</p> <p>2) Do you mean the menu item of the current page to be the same red color as logo? </p> <p>I think you took something out of the footer template that was needed because now the website shakes and jumps when i navigate.</p> <p>3) Do you mean you want the menu gone as well? or only the OK question, or menu to remain but no background top stripe?</p> <p>4) You are adding unstyled content to the home page. Please try not to use naked tags (&lt;p&gt; or &lt;h2&gt; or &lt;div&gt; instead just make up classes &lt;p class=text342342"&gt; because its possible to style that easily while its not so easy trying to grab a naked p tag.</p> <p>You are asking to have a common style between the two shown on the front page. Which of the two do you want to use?<br /> You can try to make the font size a bit smaller by adding that to quick css.<br /> <pre><code>p { font-size: .9em; }</code></pre> <p><hr /></p> <p>For making customization to your theme's CSS, we recommend that you install and get to know Firebug ( <a href="http://getfirebug.com/css" rel="nofollow">http://getfirebug.com/css</a> ) and Google Chrome developer tools ( <a href="https://developers.google.com/chrome-developer-tools/docs/overview" rel="nofollow">https://developers.google.com/chrome-developer-tools/docs/overview</a> ) browser add-on. Firebug is a free web development tool that integrates into Firefox and Chrome browsers and assists in monitoring, debugging and editing of any website's CSS, HTML, DOM, and JavaScript files.</p> <p>Once installed, this easy to follow video will show you the basics of Firebug – <a href="http://vimeo.com/20917974" rel="nofollow">http://vimeo.com/20917974</a> and get you on your way to customizing your theme like a real pro. It's 5 minutes long, and by the end you will know how to style anything!</p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/a-couple-of-more-difficult-changes-for-me#post-84854 Wed, 21 Nov 2012 09:43:12 +0000 silverwoodsweden 84854@http://www.kriesi.at/support/ <p>btw, the search bar is not working, I cannot search in it :( </p> http://www.kriesi.at/support/topic/a-couple-of-more-difficult-changes-for-me#post-84679 Tue, 20 Nov 2012 08:30:56 +0000 silverwoodsweden 84679@http://www.kriesi.at/support/ <p>First of all thank you for this great theme! (propulsion)<br /> Love it, </p> <p><a href="http://www.Svalner.se" rel="nofollow">http://www.Svalner.se</a><br /> Here are a couple of things:<br /> 1) I tried to place the search bar in the header but I want it to be fixed (I added a custom Css input with:<br /> }<br /> .search-form-header {<br /> position: absolute;<br /> top: 85px;<br /> right: 365px;<br /> }</p> <p>But it moves around with the "responsive" moves, I would like it to be fixed just below the flags in the header.</p> <p>2) I want Only the page that a visitor is in with the same colour as the logo: i.e. the underline that is under each page /hem/tjänster/ a.s.o.<br /> and the words (hem/tjänster/xxxx) to be red as well.</p> <p>3) remove the entire line above the header, (where the menu appears when I close the "welcome" text.</p> <p>4) can I have the same font in both the "blog" and the other "news" in the Home page (just below text and the slider) (the 2 widgets) </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-59157 Thu, 07 Jun 2012 05:30:54 +0000 praecurvo 59157@http://www.kriesi.at/support/ <p>bump </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-43767 Tue, 28 Feb 2012 01:10:48 +0000 praecurvo 43767@http://www.kriesi.at/support/ <p>Dude, Chris, Kriesi,</p> <p>Please take a look at my website <a href="http://www.inseeds.com" rel="nofollow">http://www.inseeds.com</a> and select the "questions" or any other longer page menu tab. Scroll down to the bottom of the page and change to the next image with the image scroll at the bottom and watch the menu bounce up and down with each image. If I lock the menu with the provided code, then when on a smaller resolution screen, the bottom menu selections can not be seen nor selected. </p> <p>Simply, a menu that is not locked consistently would resolve my problem. Ideally, I would like a menu that scrolls up and down to see every selection and then stops at the top or bottom of itself while letting the pages continue scrolling. </p> <p>Also, it doesn't seem like this theme is very smartphone friendly so perhaps I could use one of your simple smartphone themes. Is there a way to have a default mobile theme load while on a smartphone? </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-43279 Fri, 24 Feb 2012 04:45:46 +0000 praecurvo 43279@http://www.kriesi.at/support/ <p>Do you know, but if I could only scroll the main menu to it's top and bottom (from the logo to the social media buttons) and have it locked within those parameters, that would be Golden!</p> <p>aaron </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-42993 Wed, 22 Feb 2012 18:52:20 +0000 praecurvo 42993@http://www.kriesi.at/support/ <p>Thank you Dude,</p> <p>This fix doesn't solve the issue on a smaller screen like a smartphone or a laptop. On the smartphone, when zoomed in, the menu is in the way of content. To be quite honest, it's actually great in stock form but I would like to menu to stay scrolled up when the background slideshow is running. As I said earlier, every other slideshow image will fix the menu position and the other will let it go. That's the fix I'm looking for.</p> <p>aaron </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-42897 Wed, 22 Feb 2012 08:20:55 +0000 Dude 42897@http://www.kriesi.at/support/ <p>Try to use following code:<br /> <pre><code>.sidebar.sidebar1.sidebar_absolute { left: 50px !important; position: fixed !important; }</code></pre> <p>instead of:<br /> <pre><code>.sidebar.sidebar_absolute { left: 50px !important; position: fixed !important; }</code></pre> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-42850 Wed, 22 Feb 2012 04:21:21 +0000 bka835 42850@http://www.kriesi.at/support/ <p>Anybody....? Help? </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-42642 Tue, 21 Feb 2012 05:08:07 +0000 bka835 42642@http://www.kriesi.at/support/ <p>Dude, I added this style per your advise<br /> .sidebar.sidebar_absolute {<br /> left: 50px !important;<br /> position: fixed !important;<br /> }<br /> Menu sidebar works great, but now right side bar with Calendar hides behind the left sidebar, could you help please? </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-42501 Mon, 20 Feb 2012 06:48:21 +0000 praecurvo 42501@http://www.kriesi.at/support/ <p>I'd like to add as a possible solution. Can I have all of the menus automatically re-size more according to the screen space being used.</p> <p>?<br /> aaron </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-42488 Mon, 20 Feb 2012 00:43:30 +0000 praecurvo 42488@http://www.kriesi.at/support/ <p>Dude,</p> <p>It seems we have another issue. On a smartphone or smaller screen when using the "fixed" menu position code from above, viewing the lower half of the menu is not possible. Also, on my macbook pro 15 due to the screen size the "f" and "t" icons can't be seen unless there is a page selected with more content to scroll down with. I have deleted the "fixed" code and I would like a code that would allow scrolling of the menu regardless of the amount of content on a page. This would allow smaller screens the ability to scroll to see the lower portions of the menu as well. Additionally, when the slideshow is moving in the background, it has different effects on the menu's position. One picture will allow a scroll down on the page and the next will place the menu in the fixed position...FYI. If you would like to suggest a solution as well I would be interested.</p> <p>Thanks again,<br /> aaron </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-41823 Wed, 15 Feb 2012 13:57:25 +0000 Dude 41823@http://www.kriesi.at/support/ <p>Did you try 0px instead of 50px? The standard value is left: 50px - this pushes the sidebar 50px to the right. However if you use -50px the sidebar will move 100px to the left instead of just 50px. </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-41772 Wed, 15 Feb 2012 09:43:37 +0000 jorisvh 41772@http://www.kriesi.at/support/ <p>Hello,</p> <p>I still got a strange problem. I made a container div to center the site. The sidebar was 50px to the right so I fixed that with:</p> <p>.sidebar{<br /> position: fixed;<br /> left: -50px !important;<br /> }</p> <p>But it only works with a single background with no-repeat. When I use a fullscreen slideshow the sidebar flips. I have no idea why and I must fixe this for a client.</p> <p><a href="http://woonmodule.nl/test/Good.jpg" rel="nofollow">http://woonmodule.nl/test/Good.jpg</a><br /> <a href="http://woonmodule.nl/test/Not_good.jpg" rel="nofollow">http://woonmodule.nl/test/Not_good.jpg</a></p> <p>Who can help me out! Thanks a lot! </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-41719 Tue, 14 Feb 2012 23:16:25 +0000 praecurvo 41719@http://www.kriesi.at/support/ <p>Dude,</p> <p>How did you do that? Great work! </p> <p>Thank you,</p> <p>Aaron </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-41583 Tue, 14 Feb 2012 06:54:49 +0000 Dude 41583@http://www.kriesi.at/support/ <p>Try to add following code to the quick css field:<br /> <pre><code>.sidebar.sidebar_absolute { left: 50px !important; position: fixed !important; }</code></pre> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-41571 Tue, 14 Feb 2012 05:04:30 +0000 praecurvo 41571@http://www.kriesi.at/support/ <p>Thanks for the clarification. The quick CSS edits did something, but still not locking the menu. Without the edits, the menu will scroll up or down depending on the photo that is in the slideshow. I would really like a locked menu. When I place either of the two above edits into the quick CSS edit, the menus gets entirely screwy. It will move to the right sometimes, or center depending on which page I select and how far I scroll down on each page. I truly do not have the confidence to download my custom CSS from a ftp client like "areaofintere" mentioned. Is there another fix for this issue? One more thing, I also reset me entire browsing history on Chrome.</p> <p><a href="http://www.inseeds.com" rel="nofollow">http://www.inseeds.com</a></p> <p>TY<br /> aaron </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-41497 Mon, 13 Feb 2012 19:27:03 +0000 Chris Beard 41497@http://www.kriesi.at/support/ <p>Hey,</p> <p>I didn't respond earlier because the solution(s) provided are all valid.<br /> All styling can be added to your Quick CSS in your control panel OR you can add it to your css/custom.css file which you'll need to access through the FTP and then overwrite it with your modified version. Adding things to your Quick CSS has the same effect as adding it to the custom.css. </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-41421 Mon, 13 Feb 2012 10:14:43 +0000 areaofinterest 41421@http://www.kriesi.at/support/ <p>In your Wordpress dashboard &gt; Flashlight &gt; Styling at the buttom you can enter the .css code (simply copy/paste into it). If you want more control and overview you must download the custom.css file with the help from a ftp-client (i.e. filezilla). Ftp-clients makes it possible to manage your files on the server (host). When downloaded you can see the code in a simple texteditor or in a programme as adobe's dreamviewer. Here you can add, edit and change the custom.css which represents all aestethics of your webpage. When changed, you need to save the file with the same name (custom.css) and replace the old custom.css on the server with the new one you just edited.</p> <p>This is the best I can do. Remember to always backup your custom.css files. Good luck! </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-41175 Fri, 10 Feb 2012 23:30:37 +0000 praecurvo 41175@http://www.kriesi.at/support/ <p>I am so confused on how to edit my custom css. Can someone please explain?</p> <p>aaron </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-40870 Thu, 09 Feb 2012 09:19:00 +0000 areaofinterest 40870@http://www.kriesi.at/support/ <p>.sidebar {position:fixed !important;}</p> <p>this works for me! remember to clear your browser cache or the result might not show instantly. </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-40678 Wed, 08 Feb 2012 09:57:07 +0000 jorisvh 40678@http://www.kriesi.at/support/ <p>I position fixed my sidebar with a margin and padding of 0 so my sidebar is on the upper left of my screen. This is what I want. But when I go to a page with a content block and a slideshow fullscreen behind it, my sidebar goes to the right with 50px. Why is that and how can change it so my sidebar is always at the left of the screen.</p> <p>Thanks </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-40660 Wed, 08 Feb 2012 01:07:13 +0000 aroundtheworldandback 40660@http://www.kriesi.at/support/ <p>EDIT:<br /> I tried adding this to my custom.css but no luck. Any other ideas?</p> <p>avia_fullscreen_slider canvas{<br /> display: block;<br /> position: fixed;<br /> top:0;<br /> left:0;<br /> z-index: 1;<br /> } </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-40643 Tue, 07 Feb 2012 21:27:01 +0000 aroundtheworldandback 40643@http://www.kriesi.at/support/ <p>Is it possible to fix the position of the background gallery so that it won't overlap with the menu when the browser window isn't full size? Ideally it would be great if a horizontal scroll bar could be used to navigate the site when the window isn't full size, instead of all of the content overlapping. </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-39828 Thu, 02 Feb 2012 14:25:08 +0000 larssonk22 39828@http://www.kriesi.at/support/ <p>If you could share a link to your site that would be helpful</p> <p><code>.sidebar {position:fixed !important;width:220px; left:50px;}</code></p> <p>this will fix the position, set the width to 22px and leave a gap of 50px between the left edge of the browser window and the sidebar </p> http://www.kriesi.at/support/topic/fixed-position-main-menu-and-background-image#post-39825 Thu, 02 Feb 2012 14:12:49 +0000 areaofinterest 39825@http://www.kriesi.at/support/ <p>It actually messes with the position of the menu. It moves allt the way to the left of the screen. And now the shop plugin does not fit to the menu any longer..</p> <p>How do I adjust these things? Or is there a smarter way to fixate the menu? </p>