Header top bar not working - by fredwerk

This topic has 19 replies, 3 voices, and was last updated 4 years ago ago by Olga Barlow

  • Avatar: fredwerk
    fredwerk
    Participant
    August 20, 2020 at 11:30

    Hi,

    I enabled Header > Enable top bar, then made a static block, and placed it in Widgets > Place in Header top bar.

    Unfortunately it is not showing on the front end of the site.

    But maybe their is a better way. I want to have social icons above the current logo/menu and when I scroll down the page, currently menu follows and would like also the social icons to follow.

    Does this make sense?

    Cheers,

    18 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    August 20, 2020 at 15:11

    Hello,

    Could you, please, provide us with WP Dashboard and FTP access to your site to check the issue?

    Regards

    Avatar: fredwerk
    fredwerk
    Participant
    August 20, 2020 at 18:44

    Please see private section

    Please contact administrator
    for this information.
    Avatar: fredwerk
    fredwerk
    Participant
    August 21, 2020 at 19:01

    Hi,

    So I now managed to kinda make it work and added a Static Block for showing social icons. With custom CSS, I also managed to make it align right instead of left.

    I would like the top bar to stick with the header so when scrolling down, it follows.

    Any idea how?

    Many thanks!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 22, 2020 at 12:34

    Hello,

    Try to add the next code in Theme Options > Custom CSS:

    .top-bar {
        position: fixed;
        width: 100%;
        z-index: 10001;
    }
    .double-border, .fixed-header  {
        margin-top: 71px;
    }

    Regards

    Avatar: fredwerk
    fredwerk
    Participant
    August 22, 2020 at 20:47

    Hi Rose,

    This works when viewing on desktop however on mobile device, it leaves a big gap between the top of page and actual menu.

    As well, the top bar is not visible at all on mobile device. I would like it to be visible.

    I noticed that when scrolling down the page on desktop, the top bar overlap the menu and then the menu appears below the top bar. Is it possible to have the top bar pushing down the menu instead of overlapping?

    Many thanks for all your effort!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 23, 2020 at 14:38

    Hello,

    In this case, there is no possibility to make the top bar fixed, sorry.

    Regards

    Avatar: fredwerk
    fredwerk
    Participant
    August 23, 2020 at 19:15

    Hi,

    The overlap issue is not a massive issue, I can live with that, but how can I make the top bar visible on a mobile device and also to get it scroll down? Just like on the desktop.

    Cheers,

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    August 26, 2020 at 12:23

    Hello,

    Check now, please.

    Regards

    Avatar: fredwerk
    fredwerk
    Participant
    August 26, 2020 at 13:22

    Hello Olga,

    This is much better however when viewing the site on my mobile device, I have a transparent gap between the top bar and logo. The social icons are not aligned right.

    On desktop, when resizing the browser to simulate mobile device, this gap is not visible but social icons are overlapping each other and again not aligned right.

    If you could check this out it would be great.

    Thanks so much for your help!

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    August 27, 2020 at 14:02

    Hello,

    I have removed the gap. Check again.
    Don’t see the issue with the icons overlap http://prntscr.com/u6v14u
    Could you, please, provide screenshot of the issue?

    Regards

    Avatar: fredwerk
    fredwerk
    Participant
    August 27, 2020 at 14:38

    Hi,

    Everything seems to have been fixed, cannot see the icon overlap problem anymore.

    Thanks so much!!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 27, 2020 at 15:02

    Hi,

    You’re welcome!

    Regards

    Avatar: fredwerk
    fredwerk
    Participant
    November 6, 2020 at 11:11

    Hi,

    You have previously fixed the social icons scrolling down with the header logo however this is not working anymore under a mobile device or when I resize my browser window.

    Could you check it and fix please?

    Many thanks,

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 7, 2020 at 15:44

    Hello,

    Sorry for the delay in answering.
    Could you please describe the problem/desired result in more detail with screenshots for better understanding?
    Thanks in advance.

    Regards

    Avatar: fredwerk
    fredwerk
    Participant
    November 8, 2020 at 09:09

    Hi,

    Please see screenshot of the mobile version https://drive.google.com/file/d/1KLI-c3672VGsJNa-MxYj8H-UvjPlKp_q/view?usp=drivesdk

    If you check the desktop version of the web site, you will see a bar of social icons above the header/logo/menu, and when you scroll down the page, those follow down as well.

    On the mobile version, you guys fixed that and worked well untill WP updated itself.

    I would like that same bar of social icons to be visible on the mobile version and to also scroll down with header/logo.

    As well, I see that the logo is suddenly on a white background when it’s supposed to be purple. I would like that fixed.

    Cheers for looking into it.

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    November 10, 2020 at 09:18

    Hello,

    Fixed. Check now, please.

    Regards

    Avatar: fredwerk
    fredwerk
    Participant
    November 10, 2020 at 09:34

    Cheers! All looks back to normal on my side.

    Could you tell me what was the problem?

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    November 11, 2020 at 17:38

    Hello,

    Some classes were changed. We have added custom CSS to fix the issue.

    Regards

  • Viewing 19 results - 1 through 19 (of 19 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.