Okay
  Public Ticket #297942
Styling help please!
Closed

Comments

  • Phil started the conversation
    October 10, 2014 at 2:15am

    Hi,

    I wonder if you could please give me a some advice for a website I’m working on (www.hertspumping.co.uk), that uses your Salient theme - which is excellent, by the way!

    I’ve searched for answers to the following on the support forum and in the ThemeForest comments but can’t find solutions that work for me.

    1) Black bar appears when scrolling

    I edited the control panel settings to make the logo shrink to nothing upon scrolling and just have the navigation remain ‘stuck’ at the top. As a result of this, there is now a large black bar that appears at the top of the page when you scroll which I imagine is due to the header shrinking at a faster speed than the user scrolls. Can you suggest a workaround for this please?

    2) Mobile navigation

    I used CSS to centre the header logo which looks great on desktops but becomes unaligned on mobiles due to the expandable navigation box that appears to the right of it. How possible would it be to change the appearance of the navigation menu to sit below the logo on mobiles as a horizontal drop-down list?

    3) Black strip appearing above heading image on mobile

    Another black bar issue I’m afraid! When on mobile, a narrow black strip appears above the heading image of each page. Is there a reason for this?

    Any help you can offer would be great.

    Thanks,

    Phil Blackwell

  •  8,839
    Tahir replied
    October 10, 2014 at 6:19pm

    Hey!

    Please update to Salient Theme Version 4.8.1 . There are some new header styles.

    Please take a backup of your theme folder before you update so that if there are any changes made to the theme files they are not lost.
    You can update your theme by downloading a fresh copy from ThemeForest, deleting the current version you have on your server and uploading the new.
    It's recommended that you use FTP, but this also can be done with the WP dashboard if you prefer. The reason FTP is superior for this is because the theme won't have to be deactivated during the process so you won't have to reassign your widgets. If you're
    interested in keeping up to date with the latest changes and fixes, please refer to the changelog: http://themenectar.com/changelogs/salient.html
    Also, remember to clear your browser cache after each update if you notice anything off. Old theme files can persist in your local cache and make you think something's wrong.
    Also please see this FAQ: http://themenectar.ticksy.com/faq/2252 .

    Thanks

    ThemeNectar Support Team 

  • Phil replied
    October 10, 2014 at 6:26pm

    Hi,

    I think the theme is already up to date. Can you please provide some guidance in line with the exact queries? 

    Thanks,

    Phil

  •  8,839
    Tahir replied
    October 11, 2014 at 1:26am

    Hey Again!

    I am afraid the mobile menu cant be changed that easily .Other stuff should be fixed by this css.

    Add this into the Custom CSS box located in your Salient Options panel :
    @media only screen and (max-width: 1000px) and (min-width: 1px) {
    #page-header-bg[data-parallax="0"] {
        margin-top: -25px !important;
    }
    header#top #toggle-nav {
        top: 25px !important;
    }
}


#page-header-bg[data-parallax="0"] {
    margin-top: -89px;
}
body {
    background-color: #fff!important;
}
    Thanks

    ThemeNectar Support Team 

  • Phil replied
    October 11, 2014 at 3:57pm

    Hi again,

    I'm afraid the CSS didn't work. The black bar still appears when scrolling and the black strip remains above the header when viewed on mobile devices. If I provided you with the admin details, would you be able to go in and take a look for me please?

    Also, what would you suggest as a workaround for the mobile menu? Is there a way to display a different logo on mobile devices if it's not possible to change the menu?

    Thanks,

    Phil

  •  8,839
    Tahir replied
    October 13, 2014 at 1:30pm

    Hey Again!

    Yes, Please provide wp-admin login details in a private response so we can have a look. Also please provide screenshot of the issue .

    Thanks

    ThemeNectar Support Team 

  • Phil replied
    October 13, 2014 at 2:45pm

    Hi, 

    Thanks for this. I'll send across this evening.

    Phil

  •   Phil replied privately
  •   Tahir replied privately
  •   Phil replied privately
  •  1,071
    ThemeNectar replied
    October 17, 2014 at 9:18am

    Hey Phil!

    Currently I'm not seeing the black bar appear when scrolling down even though you have the logo completely disappearing - what browser are you experiencing this on? (check firefox/chrome) - also there is now an option in the latest release to change the header to a center layout as you have used custom css for :)

  • Phil replied
    October 17, 2014 at 7:26pm

    Hi,

    Sorry I jumped ahead and went into the CSS to change the body background to white which changed the black bar colour!

    I couldn't see the option for a centred header in the options - I'm using version 4.8.1 - should it be in the options panel?

    Thanks,

    Phil

  •  8,839
    Tahir replied
    October 18, 2014 at 7:18pm

    Hey!

    Please see: http://prntscr.com/4xcntd  . 

    Thanks

    ThemeNectar Support Team 

  • Phil replied
    October 20, 2014 at 12:48am

    Hi,

    Thanks for this. I tried the centred header option but it didn't make any difference so I reverted back to the custom CSS.

    I've managed to centre the logo on mobile devices however now have the problem of the menu box not being clickable. Ie. when the site shrinks, clicking the navigation button instead activates the logo link. See attached.

    Is there a piece of code I can add in to fix this? Or, would removing the logo link altogether fix it?

    Thanks,

    Phil

  •   Tahir replied privately
  • Phil replied
    October 20, 2014 at 4:59pm

    Hi,

    This is what I used as the basis for the custom CSS: http://themenectar.ticksy.com/ticket/273539/search...

    Can you see what might be causing the problem within this?

    Thanks,

    Phil

  •  8,839
    Tahir replied
    October 22, 2014 at 5:46pm

    Hey Phil!

    As suggested earlier please use the centered header option available in the theme . Your custom css is overlapping it. See screenshot for ref: http://prntscr.com/4ylzvr .

    All the Best,

    -T

    ThemeNectar Support Team