Solved

Footer - Center Logo and put links to the left & right

Jokerdomme
Tourist
30 0 0

Hello,

 

i want to put the menu on the left closer to the logo and the same on the icons on the right.

It should be a responsive design, but the first problem is only the menu on the left is listed like shown in the picture.

The second problem is where do I have to code it and which code that this is working for the footer and the header?

 

Screenshot_12.pngScreenshot_11.png

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1747 488 357

This is an accepted solution.

Same instructions again

 

Change #000 to whatever colour you want.

<style>
.site-nav.site-navigation.medium-down--hide[aria-label="Primary"] > .site-nav__item:hover > a,
.site-nav__icons svg:hover {
    color: #000 !important;
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 16 (16)

ThePrimeWeb
Shopify Partner
1747 488 357

Hey @Jokerdomme,

 

Can I have the link to your store?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Jokerdomme
Tourist
30 0 0

Here is the link to the store:

 

https://www.sixtwonine.de/

ThePrimeWeb
Shopify Partner
1747 488 357

Hey @Jokerdomme,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

 

You can change the 75% to a lower value if you want the menu to be closer. Increase it if it's too near.

<style>
@media only screen and (min-width: 989px) {
    .header-layout.header-layout--center-left,
    footer .row {
        width: 75% !important;
        margin: auto !important;
        padding: 0 !important;
    }    

    .row>* {
        padding: 0 !important;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1709136277723.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Jokerdomme
Tourist
30 0 0

Its working so far thanks. But how do I seperate it from the "main" screen because it is white as well. Maybe with a black or grey line between the header/footer and the main page? How do I make that one

ThePrimeWeb
Shopify Partner
1747 488 357

Just to be clear, do you mean something like this?

ThePrimeWeb_0-1709139845941.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Jokerdomme
Tourist
30 0 0

Exactly yes. And how I can edit the thickness and the color of this line 

ThePrimeWeb
Shopify Partner
1747 488 357

Hey @Jokerdomme,

 

Same steps as above, you can add on this code

 

3px is the thickness, black is the color. you can change it to hex colours if you need

<style>
#shopify-section-header header {
    border-bottom: 3px solid black !important;
}

footer {
    border-top: 3px solid black !important;
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Jokerdomme
Tourist
30 0 0

Much thanks. And the last thing how can I change the color if I hover over the text in the menu header?

ThePrimeWeb
Shopify Partner
1747 488 357

This is an accepted solution.

Same instructions again

 

Change #000 to whatever colour you want.

<style>
.site-nav.site-navigation.medium-down--hide[aria-label="Primary"] > .site-nav__item:hover > a,
.site-nav__icons svg:hover {
    color: #000 !important;
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Jokerdomme
Tourist
30 0 0

Alright everything working perfectly. But the last thing which I just saw, on the mobile device or if the page is below a specific width somehow the profil icon at the top right disappears. How can I fix this last thing?

ThePrimeWeb
Shopify Partner
1747 488 357
<style>
a.site-nav__link.site-nav__link--icon.medium-down--hide {
    display: inline-block !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Jokerdomme
Tourist
30 0 0

Its working much thanks.

ThePrimeWeb
Shopify Partner
1747 488 357

Try this then

 

<style>
@media only screen and (max-width: 767px) {
    a.site-nav__link.site-nav__link--icon.medium-down--hide {
        display: inline-block !important;
    }    
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Jokerdomme
Tourist
30 0 0

I just saw I somehow cant change the color of this button. Generally you do this through the theme settings where it says button and then you choose a color. But its not working on this button. So how can I change it the color and the text on it?

 

Screenshot_17.png

 

 

LuffyOnePiece
Shopify Partner
314 55 55

@Jokerdomme 

 

Can you please check the Logo alignment option in the customization.

 

Also can you please provide the preview URL of the store?


Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
Jokerdomme
Tourist
30 0 0

Here is the link to my store:

 

https://www.sixtwonine.de/