Jump to content

Fixed Topbanner and contact info, currency changer, log in.

tor@jorgensborg.com
 Share

Recommended Posts

tor@jorgensborg.com Newbie

[email protected]

Posted
Posted

Hello,

 

I am using PS 1.6.0.9 and I am trying to make topbanner and the row below (se attchement) to be fixed. I cant get it to work can any one help me with this. I will somethims remove the topbanner and then the contact info, currency changer, login row should be fixed.

 

The link to the site is www.divelife.se  . I hope you dont see this a comercial. The site is in non working phase and right now for test purposes.

 

Thank you for your help.

 

 

/Tor

post-815221-0-48822900-1411646295_thumb.jpg

Link to comment
Share on other sites
tor@jorgensborg.com Newbie

[email protected]

Posted
  • Author
Posted

Hello, 

I tried and the result was not 100% correct  :) . If you go into the website you can se. Since you are like 10000000 times :)   more skilled than me you can probably se what I have done wrong. 

 

This is what I have done. All the changes are in global.css.

 

line 6666.

 

#page .rte {
margin-top:100px;
  background: transparent none repeat scroll 0 0; }
 
line 5269.
 
header {
  z-index: 1;
  position: relative;
  background: white;
  padding-bottom: 15px; }
  header .banner {
    position:fixed; 
    top:0px;
    width:100%;
    background: black;
    max-height: 100%; }
   
header .banner .row {
      margin: 0px; }
 
header .nav {
    background: #000;
    position:fixed; 
    top:65px; 
    width:100% }
   
header .nav .row {
      margin: 0px; }
    header .nav nav {
      width: 100%; }
 
header .row {
    position: relative; }
    header .row > .container {
      position: relative; }
   
header .row #header_logo {
      padding-top: 15px; }
Link to comment
Share on other sites
sooroos Newbie

sooroos

Posted
Posted

add z-index to header .nav like z-index:8888

and also to header .banner

 

than edit padding-top values for:

header .row #header_logo set it to 150px

#search_block_top also padding-top: 150px

#header .shopping_cart also padding-top: 150px

 

u use minified CSS so i cant exactly tell you the lines and files to edit

Link to comment
Share on other sites
tor@jorgensborg.com Newbie

[email protected]

Posted
  • Author
Posted

Thank you Sooros and Vekia for your help. I found the #header.shoping_cart.

 

My next question is.

Is there any way to do this without using fixed positions. When I change the top banner I don't want to go into the css files every time to change the positions.  Sometimes I don't use the top banner and sometimes its maybe 70px in length and so on. I hope you understand what I mean.

 

If you go in now you can se

/Tor

Link to comment
Share on other sites
  • 4 months later...
unplugged1983 Newbie

unplugged1983

Posted
Posted

Hi All

THanks for the help. with use of your code and a bit of tweeking i managed to get the top banner to stay at the top of the pages while scrolling down.

 

DETAILS as follows:

CSS:

global.css of bootstrap theme folder

 

at the HEADER .banner add:

position:fixed;
top:0px;
width:100%;
 
and at the HEADER .nav add:
margin-top: 65px;

 

CODE:

 

header {
  z-index: 1;
  position: relative;
  background: white;
  padding-bottom: 15px; }
 
  header .banner {
    background: black;
    max-height: 100%;
position:fixed;
top:0px;
width:100%; }
  
  header .banner .row {
      margin: 0px; }
  
  header .nav {
    background: #333333; 
margin-top: 65px;}
 
    header .nav .row {
      margin: 0px; }
    header .nav nav {
      width: 100%; }

 

TPL: 

header.tpl of bootstrap theme folder

 

at the div class="header-container"

move the div class="banner" under the div class=nav AND the div class "container"

 

CODE:

 

<div class="header-container">

         <header id="header">

FROM HERE ---->             

                 <div class="nav"> 

                     <div class="container">

                            <div class="row">

                                  <nav>{hook h="displayNav"}</nav>

                            </div>

                     </div>

               </div>

               <div>

               <div class="container">

                     <div class="row">

                            <div id="header_logo">

                                    <a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">

                                     <img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="                                        {$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>

                                    </a>

                            </div>

                            {if isset($HOOK_TOP)}{$HOOK_TOP}{/if}

                           </div>

                     </div>

                     </div>

 TO HERE -> <div class="banner">

                           <div class="container">

                                 <div class="row">

                                  {hook h="displayBanner"}

                           </div>

                      </div>

                      </div>

         </header>

         </div>

 

 
 
Hope this helps
 
and thansk heeeps
 
My site is www.wattc.com.au
Dan
  • Like 1
Link to comment
Share on other sites
faublak Newbie

faublak

Posted
Posted

 

try to use these css styles:

.banner {position:fixed; top:0px; width:100%;}
 .nav {position:fixed; top:65px; width:100%;}
#page {margin-top:100px;}

 

Hi vekia, it works, but the page and  logo up to the top page  above the header instead of below the header. 

Link to comment
Share on other sites
faublak Newbie

faublak

Posted
Posted

Hi vekia, it works, but the page and  logo up to the top page  above the header instead of below the header. 

I solve it with z-index: 8888;. But the problem it's the logo its below the hader its'n possible to see. Anyone knows how sove it? Thanks

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...