LOGO MOVING QUARK...

Hi. I used the code posted in this topic: https://www.gavick.com/forums/quark/log ... roll-52224: Custom CSS code of Template, but in my case it does not work ... Any ideas ?, thanks, greetings ...

.gk-fixed-nav #gkLogo, .gk-fixed-nav #gkMobileMenu {
margin-top: -16px !important;
}

Hi

Not sure what You are trying to achieve with this code, but I assume You do not like logo position after scrolling the page. To set the "scrolled" logo in place use this code:

Code: Select all

#gkMenuWrap #gkLogo.text {
    margin-top: 13px;
}


Hi. Thanks for your reply. Just use the code, but it does not work ... In my case copy and paste the code in: Advanced Setting the Quark Template: Custom CSS code, Save, but does not make me any change ... Any idea ?, thanks, regards...

Hi

That's because i provided a code for taint.. website. Here for fest..

Code: Select all

.gk-fixed-nav #gkLogo,
.gk-fixed-nav #gkMobileMenu {
    margin-top: 66px !important;
}



Hi. I tried the code, but it does not work, any ideas ?, thanks, greetings ...

Hi

How are You adding this css I give You ? Again I couldn't see it anywhere. I've added it myself and it worked.

Code: Select all

#gkHeaderNav.gk-fixed-nav #gkLogo,
#gkHeaderNav.gk-fixed-nav #gkMobileMenu {
    margin-top: 66px !important;
}


just made it stronger with extra suffix to be sure it's not getting overriden by other code.

Hi. Just add the code, but it does not work. On this occasion I do not cancel the code, so you can see it, thanks, greetings .

Hi

Ok. I can see the code now, but I can also see that logo is in correct place too. So if You are saying that it didn't worked than I think I have misunderstood You. Can You please check my screen and tell me if that's the logo You had in mind or explain which logo should I focus on.

Hi. Thanks for your reply, yes, you are right, we understood wrong ... I had seen this post in the forum: https://www.gavick.com/forums/quark/log ... roll-52224
* Where in this website: http://aeroviews.uk/
The logo is always present in every moment of the scroll ...
** But analyzing my case well, I prefer to keep it as it is, then I realize that not look good ...

Problem solved, I thank you very much for your availability, greetings from Italy. René

Hi

If You wish menu to be present on top all the time (except for header) use this css:

Code: Select all

#gkHeaderNav.gk-fixed-nav {
    top: -45px !important;
}


Hello, the code is very useful with the scroll down because the scroll up and what to native ... The problem is that you can not use, because in my case: The main menu buttons are larger than they are really, also the shopping cart overlies the Menu, and also the search engine icon in the text box moves and overlies the Menu ... for these reasons I consider it a very useful code, but I would create many negative issues ... I send photo, thanks, greetings ...

Image-QUARK.jpg

Hi

Do You mean to change the menu or is it like that on purpose? Padding can be changed with this code:

Code: Select all

#gkHeaderNav.gk-fixed-nav .gkMainMenu .gkmenu.level0 > li > a {
    padding: 5px 15px;
}


Search can be lowered with:

Code: Select all

#gkHeaderNav.gk-fixed-nav .gkMainMenu .gkmenu.level0 > li > a {
    padding: 5px 15px;
}


Cart popup with:

Code: Select all

.gk-fixed-nav #gkPopupCart {
    top: 128px;
}


Search icon with:

Code: Select all

.gk-fixed-nav .top-search i {
    margin-top: 15px;
}


Hi, thanks for your reply, an optimal solution ... After implement their codes, I have only five problems that have arisen as a result of the use of the code, I attached a picture where you can clearly see ... thanks, greetings...

1) Search icon does not align with the center of the Main Menu(with the scrooll).

2) Car icon does not align with the center of the Main Menu(with the scrooll).

3) The Logo does not align with the center of the Main Menu(with the scrooll).

4) the search box overcomes, less, but overlaps(with the scrooll).

5) In the case of the Cart, I have the following problem: Match always on top of other objects with click events, and therefore, when I try to click out to close the shopping cart, events clicks are generally going to another page ... I need at least the possibility of an X at the top right of the cart, to close it, not just with the click off, but also with the X to close ...

car_search_fix.jpg

Hi

But everything looks ok ;/ Just play with the values in the code I gave You. You need to get Firebug, which is a plugin for Firefox or any other developer tool and be able to make this small adjustments by Yourself. I only have couple of minutes per question before I will need to take care of another one, so not always have time to position everythign per pixel.

OK thanks. In the case of section 5), there is a possible solution ?, greetings ...

Hi

5. I've added this script to /layout/blocks/head.php:

Code: Select all

$('#gkPopupCart').prepend('<i style="position: absolute; top:5px; right: 0; cursor: pointer;" class="fa fa-times" aria-hidden="true"></i>');
$('#gkPopupCart .fa-times').click(function(){
   $('#gkPopupCart').attr('style','');
});


Hi, thanks for your reply. Point 5 works perfectly ... For the rest of the problems above position. I already knew "Firebug", this time I've used it as suggested by you ... But for some reason does not work, neither the test with Firebug, or changing the CSS ... I send photo, where Firebug me It says: invalid property value. Any solution ?, thanks, greetings ...

FIREBUG_GAVICK.jpg

Hi

I can't see what it says in Firebug in this picture, but looks like You have a space between numeric value and "px", value should be "15px", not "15 px".

Hi, thanks for your correcion, 15 px "to" 15px "solved this point. With the icon search failed to solve, because even changing px, the Icon Cart does not move and should rise a bit ... instead the search box to get down and not moving ... Any possible solution ?, thanks, greetings ...

Hi

Search icon is in perfect position now. Here is how to move cart icon up:

Code: Select all

#gkHeaderNav.contains-cart.gk-fixed-nav #gk-cart-btn {
    top: 63px;
}


Here is how search icon looks like when I check:

Hi, thanks for the solution ... only one point can not solve, and I have tried with the code that you sent me, but it does not work: The text Box "SEARCH" not low by changing the px in the code ... Deputy picture, thanks, greetings ... René

SEARCH_BOX_SCREEN.jpg

Hi

There is a class in override.css already:

Code: Select all

.top-search form {
    display: none;
    position: absolute;
    right: 0;
    top: 40px;
    width: 300px;
    z-index: 20;
}


just change the "top: 40px;" to a bigger value so it will appear a little farther from top.

Hello, thank you, problem solved, greetings ...

Hi. Sorry, I was sure that everything worked bie, but still have a problem ...
* When I click on the icon of the shopping cart, the window opens, and if the window is open, I click on the search icon: The cart is closed to prevent overlap (In this case everything works well ). If instead the opposite operation is performed: ** I click on the icon search, the window opens, and if the window is open, I click on the icon cart: The cart is opened and the box search is not closed, and overlap (in this case it does not work quite right, because overlapping) ... Attached image. Some possible solution ?, thanks, greetings ...

SOBREPOSICION.jpg

Hi

I've added this code to /layout/blocks/head.php

Code: Select all

$('#gk-cart-btn').click(function(){
   $('.top-search').removeClass('active');
});


so the custom search will be hiding if cart is clicked.

Hello, thank you, problem solved, greetings from Italy. René

Hi

Best news today Closing this thread now.