topnav custom position

Apologies for my site has no link yet.

I want to use the space above the mainmenu to position my logo.

I have unpublished modules in the topnav, search and cart positions.

I have place a custom module in the topnav position.

Problem.jpg

This is what I want to achieve...place a logo center position above the mainmenu.

Goal.jpg

How do I achieve this?

Many thanks for helping

Without access to your live site we can't help much. Perhaps you can post it somewhere live?

Without access to your live site we can't help much. Perhaps you can post it somewhere live?

As requested - http://www.thegrandliving.co.za/testingsite/index.php

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

Code: Select all

#gkTopMenu {float: none;}
#gkHeaderTop > .gkPage {text-align: center;}
#gkHeaderNav {top: 90px;}


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

Great thank you - last request. How do I add some padding to the logo, it's a bit cramped?

Top and bottom?

Top and bottom?

Yes, top and bottom...

Also when you scroll the background should not be transparent - but rather white.

scroll.jpg

Big thank you already!

I got the background-color / scrolling sorted, it's just the padding top and bottom..

template.css
#gkHeaderTop {height...

Please don't modify template core files, use override.css instead.
To add padding - you need to add padding:

Code: Select all

#gkTopMenu {
float: none;
padding: 10px 0;
}


- remember that the sum of top and bottom padding is 20px... now, you need to increase #gkHeaderTop height with the 20px (original value is 90px):

Code: Select all

#gkHeaderTop {
height: 110px;
}


and move menu element bottom 20px (original value 90px):

Code: Select all

#gkHeaderNav {
top: 110px;
}


Ps - creating that big header is not the best option.

Ps - creating that big header is not the best option.

Thank you Cyberek...Why would you not suggest the header be sized?

http://www.thegrandliving.co.za/testingsite/

I see the logo disappears when resized - is this the problem with the big header - is the logo not responsive in that position?

The way this page is designed - putting responsive logo in header is quite impossible. All changes that would need to be made to achieve that are beyond our technical support.

thank you - I understand. Just a question so that I can better understand how to approach this fix.

When the browser frame is resized my logo stays until it eventually disappears because the size is now to small.

I assume it then uses styling contained in tablet.css, small.tablet.css and small.desktop.css

Is it possible to make adjustments so that the logo does not disappear

or if a code is triggered to display another logo (which in size would fit)?

http://www.thegrandliving.co.za/testingsite/

It can stay there, but with reduced width the spacing above fixed menu will increase - and that will not look good. You need to start with something like that:

Code: Select all

#gkTopMenu .custom img {max-width: 100%;}
@media (max-width: 600px){
    #gkTopMenu {
        display: block !important;
    }
}


Next you would need to create a width stop to reduce the spacing:

Code: Select all

#gkTopMenu .custom img {max-width: 100%;}
@media (max-width: 600px){
    #gkTopMenu {
        display: block !important;
    }
}

@media (max-width: 480px){
    #gkHeaderTop {
        height: 86px;
    }
    #gkHeaderNav {top: 86px;}
}


and one for smaller screens:

Code: Select all

@media (max-width: 320px){
    #gkHeaderTop {
        height: 64px;
    }
    #gkHeaderNav {top: 64px;}
}


This isn't perfect but gives you a little better solution than current.

Thank you Cyberek, I can work with this. Many thanks for exceptional support!

Thanks for words of appreciation .
If you will have any other questions, feel free to post new forum threads.