CSS Help needed - center menu

Hi, I have created a folowing template for WP here for my client: http://url.kybernaut.cz/1h however, I'm not able to fix few errors and bugs myself, could you give me a helping hand, please?

1) center the menu under the header image (it gets centered only I scroll down and add the navbar-fixed-top class, but I haven't found any difference which could cause this)
2) how to make the red area covering the header image to be 100vh and circle with info in middle but make it work as well while resizing the window? I tried to add :before, but there are some bugs.
3) how to make the circle with text on the header image be always circle? I tried, but it seems not to work that well as expected.

Thanks a lot!

  • Dimitris

    Hey there Karolina,

    hope you're having a beautiful day and thanks for reaching us! :slight_smile:

    1) center the menu under the header image (it gets centered only I scroll down and add the navbar-fixed-top class, but I haven't found any difference which could cause this)

    It seems that the menu is centered in my end. Can you please try to clear any caches and try one more time?

    2) how to make the red area covering the header image to be 100vh and circle with info in middle but make it work as well while resizing the window? I tried to add :before, but there are some bugs.
    3) how to make the circle with text on the header image be always circle? I tried, but it seems not to work that well as expected.

    The parent element should have a height of 100% and the slider content should be square in order for the border-radius of 50% to create a perfect circle. :wink:
    Try adding the following to your stylesheet:

    .bg-red {
      height: 100%;
    }
    #slider .content {
      width: 400px;
      height: 400px;
    }

    Hope that was some help, feel free to post back here if more assistance is required on this!

    Warm regards,
    Dimitris

  • Karolina

    Hi dimitris, I have probably solved it in meantime, however, thanks really much for your help. But could you try to chceck the site on mobile device and let me know what can be possibly wrong with the circle (I guess something with translate function ?):

    In my Javelin browser on Android it does super weird stuff and on Android phone + Chrome it keeps the right few pixels (20px?) even if overflow-x hidden should be applied. I tried to replicate those issues on desktop but without success.

    Any ideas?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.