Loading


Advertisement:

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

Darwazo

  • Jr. Member
  • **
  • Posts: 87
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: 897
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

  • Jr. Member
  • **
  • Posts: 87
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: 897
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: 897
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

  • Jr. Member
  • **
  • Posts: 87
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: 897
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: 897
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: 134
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: 897
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

  • Jr. Member
  • **
  • Posts: 87
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

Darwazo

  • Jr. Member
  • **
  • Posts: 87
Re: OSCLASSWIZARD: FREEZE / FROZEN HEADER WHILE SCROLLING
« Reply #11 on: September 26, 2017, 11:36:24 pm »
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.

« Last Edit: September 26, 2017, 11:55:48 pm by Darwazo »

marius-ciclistu

  • issues
  • Hero Member
  • *
  • Posts: 897
Re: OSCLASSWIZARD: FREEZE / FROZEN HEADER WHILE SCROLLING
« Reply #12 on: September 26, 2017, 11:46:04 pm »
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.
« Last Edit: September 26, 2017, 11:57:04 pm by marius-ciclistu »

Darwazo

  • Jr. Member
  • **
  • Posts: 87
Re: OSCLASSWIZARD: FREEZE / FROZEN HEADER WHILE SCROLLING
« Reply #13 on: September 26, 2017, 11:58:48 pm »
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

  • issues
  • Hero Member
  • *
  • Posts: 897
Re: OSCLASSWIZARD: FREEZE / FROZEN HEADER WHILE SCROLLING
« Reply #14 on: September 27, 2017, 12:02:17 am »
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.
« Last Edit: September 27, 2017, 12:09:56 am by marius-ciclistu »