Hi,
Please look on the following header of the site http://alison.com
When we scroll down the page, the header is sticky and logo size becomes smaller.
I am using essential theme on my moodle installation ver. 3.1.
seeking help of how to get it achieved in essential theme. Can I put logo on the navigation bar and when the user scrolls down, the logo becomes smaller with the sticky navbar.
Thanks in advance.
Regards.
Narendra.
Have you looked at the 'logo' settings etc. in the 'Header' section of the theme settings?
Hi Gareth,
It is a pleasure to hear from you with a very quick response.
I am able to get logo placed at #essentialnavbar replacing sitename using following in General CSS
.navbar .brand {
display:block;
background-image: url("URL of the image");
background-repeat: no-repeat;
line-height: 20px;
width: 300px;
float: left;
font-size: 0;
font-weight: normal;
margin-left: -20px;
padding: 10px 20px;
text-shadow: none;
background-position: left bottom;
background-repeat: no-repeat;
height: 64px;
}
Also with the selection of Header above the Navbar in Header page
The result is OK with navbar sticky at the top after small scroll.
The thing what I am looking for is:
a) to accommodate Logo of height more than navbar height. Currently I edited image with the same height of navbar.
b) During page scroll (Down), the time navbar sticks at the time (which in any case is happening in essential theme), the logo (which initially should be of more height than navbar) should resize to navbar height.
c) During page scroll (Up), when header appears, the logo of big height should appear.
Please see below the two scenarios of the operation:
Initial page load:
User scrolls down(Header area scrolls up and navbar area sticks to the top):
will very much appreciate your help to achieve the same.
Regards
Narendra
Hi Narendra,
So in effect you want the same sort of thing as the user image when the navbar is below the header as currently exists? If so, then what you describe is not trivial. Therefore time is money. Please review the 'Support' / 'Customisation' sections of the readme.txt file that comes with the theme for more details.
Kind regards,
Gareth
Hi Gareth,
After analyzing features of the theme, I think solution lies within the theme and you have implemented the scenario I asked in other item.
The same thing is happening when we login to the system. At the right top corner Userpicture is behaving the same way. When we are at the top of the screen, bigger user picture is displayed. And when we scroll down and navbar is in sticky mode, the bigger user picture is not visible and smaller user picture is shown on the navbar.
It will be highly appreciable to know the exact place of the implementation done in essential theme, so it can be done same for logo at the top left.
Hope this time I will get solution to implement the same for logo.
Warm regards,
Narendra.
Hi Narendra,
Indeed the user picture implements the same sort of functionality you desire for the logo. To detail the places that implement this functionality will take me time. Time is money. As stated in the readme.txt file the theme comes with NO support. Please re-read the 'Support' / 'Customisation' sections of the readme.txt file for more details.
Kind regards,
Gareth