Okay
  Public Ticket #1415776
Logo - no top padding
Closed

Comments

  •  3
    Lee started the conversation
    December 29, 2017 at 5:48pm

    Hi, 

    Can you tell me how I can have my logo pressed to the top of the page similar to this - http://www.futureplc.com

    Thanks in advance!

  •  3,034
    Andrew replied
    December 29, 2017 at 5:58pm

    Hey there,

    Thanks for reaching in,

    Can you send a link to your website so we can check whether this is possible with CSS on it.

    Regards

  •  3
    Lee replied
    December 29, 2017 at 6:13pm

    Hi Andrew,

    Thanks for the speedy response. 

    I am attempting it on http://www.11elevendc.com. Ideally I would like the initial logo and nav transparent with the logo touching and then upon scrolling have the top nav reduce in size.

  •  9,016
    Tahir replied
    January 1, 2018 at 2:17pm

    Hey Again, Hope you had a Great Weekend, 

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    #header-outer[data-transparent-header="true"].transparent #logo .starting-logo {
    top: -28px !important;
}

    Thanks

    ThemeNectar Support Team 

  •  3
    Lee replied
    January 1, 2018 at 4:48pm

    Thank you Andrew, that worked perfectly.

    Can you tell me how to get it to work on the logo once the user scrolls down please?

  •  9,016
    Tahir replied
    January 2, 2018 at 12:26pm

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    #header-outer[data-transparent-header="true"].small-nav #logo img {
    top: -17px !important;
}
#header-outer[data-transparent-header="true"].transparent #logo img {
    top: -28px !important;
}

    Thanks

    ThemeNectar Support Team 

  •  3
    Lee replied
    January 2, 2018 at 5:24pm

    Thank you Andrew, that worked like a charm!!

    While I have an open thread. Is there a way to reduce the padding on the bottom half of the top nav? So, that the bottom of the coloured panel will touch the bottom of the logo. 

    Additionally, is there a way to alter the height of top nav menu links?

    Thank you in advance, you guys are awesome!

  •  3,034
    Andrew replied
    January 2, 2018 at 6:28pm

    Hi Lee,

    Thanks for getting back to us. 

    The CSS below should work for that padding issue:

    @media only screen and (min-width: 1001px){
    body.material #header-outer.small-nav #logo{
        margin-top: 17px!important;
        margin-bottom: -17px!important;
      }}

    In regards to the menu heights, are you looking to get the links positioned closer to the top or bottom of the menu?

    I look forward to your reply. 

    Best Regards,


  •  3
    Lee replied
    January 2, 2018 at 6:59pm

    Hi Andrew,

    I've attached an image of what I am ideally looking to achieve. Basically, remove the spacing at the bottom of the top nav and then centralise the text/headings within the top nav.

    http://leedr.co.uk/obOn

  •  3,034
    Andrew replied
    January 2, 2018 at 7:48pm

    Hey there,

    Thanks for reaching in,

    You attachment seems to be bouncing off a 404 error page. Can you please send us an indicated screenshot so we can sort this out ASAP.

    Regards

  •  3
    Lee replied
    January 3, 2018 at 5:11pm

    Apologies, see attached.

  •  9,016
    Tahir replied
    January 4, 2018 at 1:47pm

    Hey Again,

    Please provide the page url so that i can write up the custom css for whats possible.

    Thanks

    ThemeNectar Support Team 

  •   Lee replied privately
  •  9,016
    Tahir replied
    January 5, 2018 at 2:47pm

    Hey Again,

    Could you allow us to log in to your website backend dashboard so we can check on this for you more?. We are gonna need the username and password of admin user as well as the login url.


    Thanks 

    ThemeNectar Support Team 

  •   Lee replied privately
  •  9,016
    Tahir replied
    January 6, 2018 at 12:43pm

    Just added in the css . Please check now . 

    Be.st

    ThemeNectar Support Team 

  • Lee replied
    January 6, 2018 at 2:28pm

    Thank you Tahir, it was worked perfectly on desktop/anything above 1000px. I know I can adjust through the admin however, the logo display on my phone appears to be incorrect. I have attached a screenshot taken from my iPhone 6.

    Is there a way to do an image replace on mobile? I would simple use the text from the logo and exclude the box. I have attached what I would propose to use for mobile and tablet.

    Any advice?

  •  9,016
    Tahir replied
    January 10, 2018 at 10:25am

    Hey Again,

    No i am afraid there is no such Image Replacement option available .

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    @media only screen and (max-width: 1000px) and (min-width: 1px) {
    #header-outer[data-transparent-header="true"].transparent #logo img {
        top: 0px !important;
        height:60px !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  3
    Lee replied
    January 16, 2018 at 6:09pm

    This worked so well and I was able to use the various settings to get what I wanted to work. See http://www.11elevendc.com.

    The one snagging point is the height of the nav bar once you scroll down - it's too big/deep. I would also really love to use Body Border (Passepartout) but the height of the nav bar becomes extremely large. 

    Any help would be massively appreciated.


  •  9,016
    Tahir replied
    January 17, 2018 at 1:51pm

    Hey Again,

    Try adjusting the Header Padding in here : http://prntscr.com/i1oz8h .

    Be.st

    ThemeNectar Support Team