Some questions about quark restaurant template

Hey guys!

website: http://demo.macawlab.com/dukes/

I have some questions:

1. How to change aside menu icon ( MENU and triple bar) into a logo image (when clicking on logo image, opens a off-canvas menu)?
2. How to make off-canvas menu items centered?
3. I want to remove copyrights position at all, leave only a header, that it should be in full screen on a frontpage ( no scrolling down or up)?

Thanks in advance!

1. This is really bad idea. From the user experience point of view - users click logo to get to homepage. This is how it was made for last 10 or more years. 3 bars is being used for last 3-4 years as a symbol of menu. So if you doesn't want to make your users confused and site inaccessible, you should not touch this element.
2,3. Could you please post an url to your site?

I know its a bad idea, but people wants so anyways I need to change it to a logo or some kind of other image...
Site url: demo.macawlab.com/dukes

Its not easy change, but...
Please edit this file:
templates/gk_quark/layouts/default.php
and find this block of code:

Code: Select all

                 <div id="gkMobileMenu" class="gkPage">
                     <span id="gk-mobile-menu-text"><?php echo JText::_('TPL_GK_LANG_MENU'); ?></span>
                     <i id="static-aside-menu-toggler"></i>
                 </div>


It represents current state of the menu.
You could remove middle part:

Code: Select all

                 <div id="gkMobileMenu" class="gkPage">

                 </div>


and place image inside:

Code: Select all

                 <div id="gkMobileMenu" class="gkPage">
                     <img src="<?php echo $this->API->URLtemplate() . '/images/gavern-logo.png'; ?>" alt="some alt text"/>
                 </div>


It will load gavern-logo.png from images filder inside of the template folder.

It works but how to make different size, because now its cutting half a logo...

Please edit: /templates/gk_quark/css/override.css and add at its end:

Code: Select all

#gkMobileMenu {
    width: 100px !important;
    height: auto !important;
    margin-top: 10px !important;
}


Remember to enable "CSS override" in template settings - advanced section.

This one works too, but now I lost my header

Ok, I got it back! so How about the questions 2 and 3? Is it possible to do something?

If it goes to 2:

Code: Select all

#aside-menu li {text-align: center;}


And if it goes to 3 - could you please mark this element on a screenshot?

I removed component/content position from frontpage, and i want to make header that it fits whole screen, here is an example : http://girlandthegoat.com/
is it possible to do something?

Make it full screen, without a white space

I'm afraid it is not possible. Depending on screen size/aspect ration header might fill entire height, be to wide or to narrow.

then is it possible to change the heigh?

I need only a picture on frontpage, nothing else

Yes, you can define header height in template settings (different for different devices).