Loading


Advertisement:

Author Topic: OSCLASSWIZARD: FREEZE / FROZEN HEADER WHILE SCROLLING  (Read 244 times)

Darwazo

  • Newbie
  • *
  • Posts: 38
OSCLASSWIZARD: FREEZE / FROZEN HEADER WHILE SCROLLING
« on: September 11, 2017, 05:28:43 am »
Hello Everyone...

I got one question: How to FREEZE HEADER WHILE SCROLLING in OsclassWizards? Its not much technical but stil........

Pls see  attached file.

Thanks

marius-ciclistu

  • issues
  • Hero Member
  • *
  • Posts: 593
Re: OSCLASSWIZARD: FREEZE / FROZEN HEADER WHILE SCROLLING
« Reply #1 on: September 11, 2017, 07:15:17 am »
https://www.w3schools.com/howto/howto_css_fixed_menu.asp
Try position fixed and top like in this example.

Darwazo

  • Newbie
  • *
  • Posts: 38
Re: OSCLASSWIZARD: FREEZE / FROZEN HEADER WHILE SCROLLING
« Reply #2 on: September 12, 2017, 01:41:12 am »
Thank you ;)

Its tough call ....in terms of application with osclass ;(

anyways thanks

marius-ciclistu

  • issues
  • Hero Member
  • *
  • Posts: 593
Re: OSCLASSWIZARD: FREEZE / FROZEN HEADER WHILE SCROLLING
« Reply #3 on: September 12, 2017, 09:50:04 am »
Why? The simplest way is to edit header.php from your theme's files. A more elegant way is to edit main.css and header.scss(or common.scss(i can't remember the exact name of the scss file).

marius-ciclistu

  • issues
  • Hero Member
  • *
  • Posts: 593
Re: OSCLASSWIZARD: FREEZE / FROZEN HEADER WHILE SCROLLING
« Reply #4 on: September 12, 2017, 10:22:35 am »
For example:

the header id:

Code: [Select]
position: fixed;
top: 0;
margin-left: auto;
margin-right: auto;
max-width: 1170px;
background: white;
z-index: 1;

If your container has 1170 px width and it is centered horizontally.

Then you must put for content id

Code: [Select]
margin-top: 150px;
If your header has 150 px height.

Darwazo

  • Newbie
  • *
  • Posts: 38
Re: OSCLASSWIZARD: FREEZE / FROZEN HEADER WHILE SCROLLING
« Reply #5 on: September 21, 2017, 12:46:08 pm »
Thanks marius...

I tried many times but couldn't finish :( ...bcz I'm learning css and everything without some basics etc.

I managed to freeze only Header Area [with mess with Welcome area and search box]!! TOP and SEARCH BOX..nope !!

marius-ciclistu

  • issues
  • Hero Member
  • *
  • Posts: 593
Re: OSCLASSWIZARD: FREEZE / FROZEN HEADER WHILE SCROLLING
« Reply #6 on: September 21, 2017, 01:30:06 pm »
Can you share your site address?

marius-ciclistu

  • issues
  • Hero Member
  • *
  • Posts: 593
Re: OSCLASSWIZARD: FREEZE / FROZEN HEADER WHILE SCROLLING
« Reply #7 on: September 21, 2017, 04:57:50 pm »
Nevermind.

In your theme's files, look for header.php

Replace

Code: [Select]
<header id="header">
with

Code: [Select]
<header id="header" style="position: fixed;top: 0;margin-left: auto;margin-right: auto;background: white;z-index: 1;">
Then

replace

Code: [Select]
<div class="wrapper-flash">
    </div>

with

Code: [Select]
<div class="wrapper-flash" style="margin-top: 500px;">
    </div>

in the same file if you can find it there.

But...this is not a good idea because you keep 500 px from your view page blocked.

If you meant to block only this code:

Code: [Select]
  <div class="top_links">
    <div class="container">
      <div class="language">
                                <strong>
        Language:        </strong> <span>
        English (US)        <i class="fa fa-caret-down"></i></span>
        <ul>
                              <li><a id="zh_TW" href="http://demo.osclasswizards.com/osclasswizards/index.php?page=language&amp;locale=zh_TW">Chinese (Taiwan)</a></li>
                                        <li><a class="active" id="en_US" href="http://demo.osclasswizards.com/osclasswizards/index.php?page=language&amp;locale=en_US">English (US)</a></li>
                                      </ul>
              </div>
            <p class="welcome-message">Osclasswizards - Free Responsive Theme</p>
            <ul>
                                <li><a id="login_open" href="http://demo.osclasswizards.com/osclasswizards/index.php?page=login">
          Login          </a></li>
                <li><a href="http://demo.osclasswizards.com/osclasswizards/index.php?page=register&amp;action=register">
          Register for a free account          </a></li>
                              </ul>
    </div>
  </div>
  <div class="main_header" id="main_header">
    <div class="container">
      <div id="logo"> <a href="http://demo.osclasswizards.com/osclasswizards/">osclasswizards</a> <span id="description"></span> </div>
      <h2 class="pull-right toggle"><i class="fa fa-align-justify"></i></h2>
      <ul class="links">
                <li> <a href="http://demo.osclasswizards.com/osclasswizards/index.php?page=page&amp;id=25">About Us</a> </li>
                <li> <a href="http://demo.osclasswizards.com/osclasswizards/index.php?page=contact">
          Contact          </a> </li>
      </ul>
      <div class="publish">
                <a class="btn btn-success" href="http://demo.osclasswizards.com/osclasswizards/index.php?page=item&amp;action=item_add">
        Publish your ad for free        </a>
              </div>
    </div>
  </div>

then you should adapt the above fisrt style to these 2 divs class="top_links" and id="main_header" and the margin-top to the one with the id="header_map".


_Carlison

  • Full Member
  • ***
  • Posts: 114
Re: OSCLASSWIZARD: FREEZE / FROZEN HEADER WHILE SCROLLING
« Reply #8 on: September 21, 2017, 06:37:44 pm »
Quote
<style>
#header {
position:fixed;margin-top:0;
z-index:999;
}
</style>

Put above code in your  " https://darwazo.com/oc-content/themes/osclasswizards/css/main.css "  in last line without "<style> </style> " .

or

" header.php "


 then you can see result.
« Last Edit: September 21, 2017, 06:40:05 pm by _Carlison »

marius-ciclistu

  • issues
  • Hero Member
  • *
  • Posts: 593
Re: OSCLASSWIZARD: FREEZE / FROZEN HEADER WHILE SCROLLING
« Reply #9 on: September 21, 2017, 06:53:32 pm »
Quote
<style>
#header {
position:fixed;margin-top:0;
z-index:999;
}
</style>

Put above code in your  " https://darwazo.com/oc-content/themes/osclasswizards/css/main.css "  in last line without "<style> </style> " .

or

" header.php "


 then you can see result.

Besides this you must put margin-top to the next div after the header in order for the whole content of the page to be visible.

Darwazo

  • Newbie
  • *
  • Posts: 38
Re: OSCLASSWIZARD: FREEZE / FROZEN HEADER WHILE SCROLLING
« Reply #10 on: September 22, 2017, 05:24:35 am »
Thank you very much Marius and Carlison !! I given a try and it worked !!
mine website is almost in shame with few challenges www.darwazo.com

i'll try to implement on live website and will give you feedback.

You guys are champ !! and thank you again