Search in:
Suggested Search: installation, configuration
Search in:
Suggested Search: installation, configuration

Header bar issues

Home › Forums › Pro Support › Header bar issues

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 14, 2018 at 12:32 pm #68292
    nigel colenigel cole
    Participant

    Hi,

    I’ve just upgraded and am struggling to get the responsive header to work as I’d like.

    My issues are:

    1) When I shrink below the break point, the responsive header comes up ontop of the existing header. I’d like it to replace the existing header in much the same as the existing menu is replaced by the responsive one.

    2) The responsive logo (I’m using a banner image with site name added into it) shrinks as the page narrows, making the text and mountains in my image look a bit daft. Is it possible to not shrink, but just lose the image off to the right as the page narrows?

    3) The header bar seems to have a margin each side, which at the moment allows the old header to be seen. This won’t be a problem if the old header can be auto removed, but maybe removing the margins could be a workaround?

    Many thanks

    Nigel

    May 14, 2018 at 12:37 pm #68300
    Peter FeatherstonePeter Featherstone
    Participant

    Hey Nigel,

    1. You can add your original header bar to the CSS of Menu to Hide option in the same way you do for hiding the original menu. Failing that, you can use the Custom CSS option to explicitly hide it at all screen sizes.

    2. That would only be possible with your own Custom CSS as it’s only really built for logos, not banner images.

    3. Again, if you want to customise it to this level, you would need some Custom CSS to remove the margins but as you said, point number 1 will negate that issue anyway.

    I hope that helps

    Peter

    May 14, 2018 at 1:13 pm #68299
    nigel colenigel cole
    Participant

    Thanks Peter

    I’ve tried adding the CSS to the menu to hide option but am a bit lost tbh. When I added ‘#site-navigation, #site-header’ the header container disappeared, the image remained and the text below jumped up to be obscured by the new image.

    my site is hinckleymountaineering.club

    May 14, 2018 at 1:39 pm #68298
    Peter FeatherstonePeter Featherstone
    Participant

    Hi Nigel,

    If you are removing your current header then anything below it will jump up, because there is nothing above it anymore.

    It doesn’t look like you have turned on the Header Bar > Sizing > Adjust Page option to counter this as per the docs below:

    https://responsive.menu/docs/advanced-setup/header-bar/#sizing

    In regards your header image stretching and margin removal, the below should be all you need:

    #responsive-menu-pro-header {
   padding 0;
   overflow: hidden;
}

#responsive-menu-pro-header .responsive-menu-pro-header-box {
   margin: 0;
}

    Hope that helps

    Peter

    May 14, 2018 at 1:48 pm #68297
    nigel colenigel cole
    Participant

    Is there any chance that you can see the code needed to remove the old header image on shrinking to the breakpoint?

    May 14, 2018 at 2:02 pm #68296
    nigel colenigel cole
    Participant

    I’ve added your code and the margins are now gone. However the old image is now on top.

    May 14, 2018 at 2:18 pm #68295
    Peter FeatherstonePeter Featherstone
    Participant

    Hi Nigel,

    All you need to do is add .site-header to the list of CSS of Menu to Hide options.

    All the best

    Peter

    May 15, 2018 at 8:14 am #68294
    nigel colenigel cole
    Participant

    Many thanks Peter, you’re a star. I was getting my dots and hashes miced up. All works well now

    May 15, 2018 at 9:15 am #68293
    Peter FeatherstonePeter Featherstone
    Participant

    Hey Nigel,

    No problem, it’s easy to do 🙂

    Glad it works for you now.

    Peter

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Header bar issues’ is closed to new replies.