OSCLASSWIZARD: FREEZE / FROZEN HEADER WHILE SCROLLING

[Darwazo]

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]

https://www.w3schools.com/howto/howto_css_fixed_menu.asp
Try position fixed and top like in this example.

[Darwazo]

Thank you

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

anyways thanks

[marius-ciclistu]

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]

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]

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]

Can you share your site address?

[marius-ciclistu]

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]

<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.

[marius-ciclistu]

<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]

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

[Darwazo]

Thank you very much Marius and Carlison for valuable input.

I tried and header was working fine except (id="form_vh_map" - Main search was not appearing on all pages).......but I got bit challenging thought ......I want (id="form_vh_map" - Main search to get freeze and appear on top of everypage.

Let me write again here :

While on main page and scrolling down - once header is finishing to appear - MAIN SEARCH should get freeze ? and same should appear while "SEARCH" Page ( Filter SEARCH etc). ..... Sorry for this bit of complicated oneee !!

Screenshot of main page freezing is attached.

Thank you again.

[marius-ciclistu]

I don't know about your theme but bender has this behaviour of not showing the search bar on static pages and contact page, item page etc.

To show the search bar on all pages, look in your header.php and remove the condition if osc_is_static_page.... or someting like that.

[Darwazo]

its osclasswizards !!
Sorry - I meant only while searching items / products - (id="form_vh_map" - MAIN SEARCH should appear on top / freeze. Therefore, if anyone is at bottom of page and wants to re-search - he just put cursor on top in MAIN SEARCH and click Search

I have modified Question above. Thanks

[marius-ciclistu]

I don't have that theme besides the online demo, so I don't see it's files. Your site doesn't have frozen header. All I cam do is try to edit with f12 your site and give you the clues.

Edit:
Put these lines in your header.php

Code: [Select]

<header id="header" style="position: fixed;top: 0;margin-left: auto;margin-right: auto;background: white;z-index: 1;width: 100%;">


Code: [Select]

<div class="wrapper-flash" style="margin-top: 200px;">
    </div>


 instead of

Code: [Select]

<header id="header">and

Code: [Select]

<div class="wrapper-flash">
  </div>
Note. on mobile it won't work.