Jump to content

Logo in the middle of the menu

By Erwan, in Customize with code

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 11
  • Views 691
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan
tuanphan

Don't remove any code. Add this to Design > Custom CSS .header-actions.header-actions--right>nav:nth-child(n+3) { display: none; } .header-actions.header-actions--right * { color: whi

Posted Images

tuanphan Level 17

tuanphan

Posted
Posted
17 hours ago, Erwan said:

Site URL: https://www.erwanlier.com/

Hi,

 

Is there a way, witthout changing the template to change my navigation menu so my logo/name is at the middle and not above ?

www.erwanlier.com

 

Thank you !!

image.thumb.png.8c462bc03e7d46a643c2ddf22248162e.png

Hi, you mean

Left Menu - Middel Logo - Right Menu (All on same line)?

Do you use Personal or Business Plan? Each plan will have a different solution.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Erwan Level 5

Erwan

Posted
  • Author
Posted
7 hours ago, tuanphan said:

Hi, you mean

Left Menu - Middel Logo - Right Menu (All on same line)?

Do you use Personal or Business Plan? Each plan will have a different solution.

Exactly, menu - logo- menu !
 

I'm on personal plan !

 

Thanks !

Link to comment
tuanphan Level 17

tuanphan

Posted
Posted
15 hours ago, Erwan said:

Exactly, menu - logo- menu !
 

I'm on personal plan !

 

Thanks !

Hi,

First change header layout to: Left (Menu) - Middle (Logo)

Then let me know. We will give the code to achieve your desired layout

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
tuanphan Level 17

tuanphan

Posted
Posted
On 8/5/2021 at 3:58 PM, Erwan said:

 

Done !

Hi. Sorry for the delay.

Add this code to Settings > Advanced > Code injection > Footer 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var _0x2a83=['100017Kwgakl','clone','230022RvftGH','462552hCJEuW','542362HJtRsQ','7WSdNgn','insertAfter','177767eLtmhg','602656EjldxK','1dpsgOw','1jmmrpI','564626moilSz'];function _0x1751(_0x5a3e98,_0x51f93c){return _0x1751=function(_0x2a8347,_0x1751eb){_0x2a8347=_0x2a8347-0x1bd;var _0x452734=_0x2a83[_0x2a8347];return _0x452734;},_0x1751(_0x5a3e98,_0x51f93c);}(function(_0x24f638,_0x2a548d){var _0x50afa6=_0x1751;while(!![]){try{var _0x24c33f=parseInt(_0x50afa6(0x1c6))*parseInt(_0x50afa6(0x1c8))+-parseInt(_0x50afa6(0x1bf))+-parseInt(_0x50afa6(0x1c7))*parseInt(_0x50afa6(0x1c4))+-parseInt(_0x50afa6(0x1c5))+-parseInt(_0x50afa6(0x1c0))+parseInt(_0x50afa6(0x1c1))+-parseInt(_0x50afa6(0x1c2))*-parseInt(_0x50afa6(0x1bd));if(_0x24c33f===_0x2a548d)break;else _0x24f638['push'](_0x24f638['shift']());}catch(_0x5cb92b){_0x24f638['push'](_0x24f638['shift']());}}}(_0x2a83,0x5191e),jQuery(document)['ready'](function(_0x36b14f){var _0x37fa0e=_0x1751;_0x36b14f('.header-display-desktop\x20nav.header-nav-list')[_0x37fa0e(0x1be)]()[_0x37fa0e(0x1c3)]('.header-actions.header-actions--right>.showOnMobile');}));
</script>
<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+3) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) {display: none;}
  .header-nav-item:nth-child(n+4) {
    margin-right: 1.5vw;
}
.header-actions.header-actions--right * {
    opacity: 1;
    transform: unset;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Erwan Level 5

Erwan

Posted
  • Author
Posted
On 8/8/2021 at 4:59 AM, tuanphan said:

Hi. Sorry for the delay.

Add this code to Settings > Advanced > Code injection > Footer 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var _0x2a83=['100017Kwgakl','clone','230022RvftGH','462552hCJEuW','542362HJtRsQ','7WSdNgn','insertAfter','177767eLtmhg','602656EjldxK','1dpsgOw','1jmmrpI','564626moilSz'];function _0x1751(_0x5a3e98,_0x51f93c){return _0x1751=function(_0x2a8347,_0x1751eb){_0x2a8347=_0x2a8347-0x1bd;var _0x452734=_0x2a83[_0x2a8347];return _0x452734;},_0x1751(_0x5a3e98,_0x51f93c);}(function(_0x24f638,_0x2a548d){var _0x50afa6=_0x1751;while(!![]){try{var _0x24c33f=parseInt(_0x50afa6(0x1c6))*parseInt(_0x50afa6(0x1c8))+-parseInt(_0x50afa6(0x1bf))+-parseInt(_0x50afa6(0x1c7))*parseInt(_0x50afa6(0x1c4))+-parseInt(_0x50afa6(0x1c5))+-parseInt(_0x50afa6(0x1c0))+parseInt(_0x50afa6(0x1c1))+-parseInt(_0x50afa6(0x1c2))*-parseInt(_0x50afa6(0x1bd));if(_0x24c33f===_0x2a548d)break;else _0x24f638['push'](_0x24f638['shift']());}catch(_0x5cb92b){_0x24f638['push'](_0x24f638['shift']());}}}(_0x2a83,0x5191e),jQuery(document)['ready'](function(_0x36b14f){var _0x37fa0e=_0x1751;_0x36b14f('.header-display-desktop\x20nav.header-nav-list')[_0x37fa0e(0x1be)]()[_0x37fa0e(0x1c3)]('.header-actions.header-actions--right>.showOnMobile');}));
</script>
<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+3) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) {display: none;}
  .header-nav-item:nth-child(n+4) {
    margin-right: 1.5vw;
}
.header-actions.header-actions--right * {
    opacity: 1;
    transform: unset;
}
</style>

 

Hi !
No problem but I think code injection is only available for business or commercial plan. As I said, I'm on personal plan ... hopefully there is a solution too !

 

code-inject.JPG

Link to comment
tuanphan Level 17

tuanphan

Posted
Posted
On 8/11/2021 at 8:41 PM, Erwan said:

Hi !
No problem but I think code injection is only available for business or commercial plan. As I said, I'm on personal plan ... hopefully there is a solution too !

 

code-inject.JPG

Edit your Site Footer (Site Footer, not Footer COde Injection) >> Add a Markdown BLock >> Try pasting the code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Erwan Level 5

Erwan

Posted
  • Author
Posted
On 8/14/2021 at 4:30 AM, tuanphan said:

Edit your Site Footer (Site Footer, not Footer COde Injection) >> Add a Markdown BLock >> Try pasting the code

Okay, done, but still not working. Looks like it makes my last two menu disapear  ... I'm not familiar with this kind of code so I don't knwo how to correct it !

Link to comment
tuanphan Level 17

tuanphan

Posted
Posted
On 8/16/2021 at 10:00 PM, Erwan said:

Okay, done, but still not working. Looks like it makes my last two menu disapear  ... I'm not familiar with this kind of code so I don't knwo how to correct it !

Try adding this to Markdown Block 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var _0x2a83=['100017Kwgakl','clone','230022RvftGH','462552hCJEuW','542362HJtRsQ','7WSdNgn','insertAfter','177767eLtmhg','602656EjldxK','1dpsgOw','1jmmrpI','564626moilSz'];function _0x1751(_0x5a3e98,_0x51f93c){return _0x1751=function(_0x2a8347,_0x1751eb){_0x2a8347=_0x2a8347-0x1bd;var _0x452734=_0x2a83[_0x2a8347];return _0x452734;},_0x1751(_0x5a3e98,_0x51f93c);}(function(_0x24f638,_0x2a548d){var _0x50afa6=_0x1751;while(!![]){try{var _0x24c33f=parseInt(_0x50afa6(0x1c6))*parseInt(_0x50afa6(0x1c8))+-parseInt(_0x50afa6(0x1bf))+-parseInt(_0x50afa6(0x1c7))*parseInt(_0x50afa6(0x1c4))+-parseInt(_0x50afa6(0x1c5))+-parseInt(_0x50afa6(0x1c0))+parseInt(_0x50afa6(0x1c1))+-parseInt(_0x50afa6(0x1c2))*-parseInt(_0x50afa6(0x1bd));if(_0x24c33f===_0x2a548d)break;else _0x24f638['push'](_0x24f638['shift']());}catch(_0x5cb92b){_0x24f638['push'](_0x24f638['shift']());}}}(_0x2a83,0x5191e),jQuery(document)['ready'](function(_0x36b14f){var _0x37fa0e=_0x1751;_0x36b14f('.header-display-desktop\x20nav.header-nav-list')[_0x37fa0e(0x1be)]()[_0x37fa0e(0x1c3)]('.header-actions.header-actions--right>.showOnMobile');}));
</script>

and this to DESIGN > CUSTOM CSS 

.header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+3) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) {display: none;}
  .header-nav-item:nth-child(n+4) {
    margin-right: 1.5vw;
}
.header-actions.header-actions--right * {
    opacity: 1;
    transform: unset;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Erwan Level 5

Erwan

Posted
  • Author
Posted
11 hours ago, tuanphan said:

Try adding this to Markdown Block 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var _0x2a83=['100017Kwgakl','clone','230022RvftGH','462552hCJEuW','542362HJtRsQ','7WSdNgn','insertAfter','177767eLtmhg','602656EjldxK','1dpsgOw','1jmmrpI','564626moilSz'];function _0x1751(_0x5a3e98,_0x51f93c){return _0x1751=function(_0x2a8347,_0x1751eb){_0x2a8347=_0x2a8347-0x1bd;var _0x452734=_0x2a83[_0x2a8347];return _0x452734;},_0x1751(_0x5a3e98,_0x51f93c);}(function(_0x24f638,_0x2a548d){var _0x50afa6=_0x1751;while(!![]){try{var _0x24c33f=parseInt(_0x50afa6(0x1c6))*parseInt(_0x50afa6(0x1c8))+-parseInt(_0x50afa6(0x1bf))+-parseInt(_0x50afa6(0x1c7))*parseInt(_0x50afa6(0x1c4))+-parseInt(_0x50afa6(0x1c5))+-parseInt(_0x50afa6(0x1c0))+parseInt(_0x50afa6(0x1c1))+-parseInt(_0x50afa6(0x1c2))*-parseInt(_0x50afa6(0x1bd));if(_0x24c33f===_0x2a548d)break;else _0x24f638['push'](_0x24f638['shift']());}catch(_0x5cb92b){_0x24f638['push'](_0x24f638['shift']());}}}(_0x2a83,0x5191e),jQuery(document)['ready'](function(_0x36b14f){var _0x37fa0e=_0x1751;_0x36b14f('.header-display-desktop\x20nav.header-nav-list')[_0x37fa0e(0x1be)]()[_0x37fa0e(0x1c3)]('.header-actions.header-actions--right>.showOnMobile');}));
</script>

and this to DESIGN > CUSTOM CSS 

.header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+3) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) {display: none;}
  .header-nav-item:nth-child(n+4) {
    margin-right: 1.5vw;
}
.header-actions.header-actions--right * {
    opacity: 1;
    transform: unset;
}

 

This is what it is doing ! image.thumb.png.9db10cf6e602aeed9e8a4063bbc0c303.png

 

I don't know if it can help, but the "random" menu could be non existant if it makes things much more easier, so it't split in half ! 2 menus left, 2 menus right !

 

Link to comment
  • Solution
tuanphan Level 17

tuanphan

Posted
  • Solution
Posted
On 8/19/2021 at 2:24 AM, Erwan said:

This is what it is doing ! image.thumb.png.9db10cf6e602aeed9e8a4063bbc0c303.png

 

I don't know if it can help, but the "random" menu could be non existant if it makes things much more easier, so it't split in half ! 2 menus left, 2 menus right !

 

Don't remove any code. Add this to Design > Custom CSS 

.header-actions.header-actions--right>nav:nth-child(n+3) {
    display: none;
}
.header-actions.header-actions--right * {
    color: white;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources