Okay
  Public Ticket #2033458
CSS
Open

Comments

  • doorcoupons started the conversation

    I bought the theme some minutes ago and I need help with 2 problems I have:

    1) I want to remove the top header (Care is the cornerstone of our practice, careers,..)

     2) Furthermore, I want to hide the part at the top of the slider (Visit our Location 250 Main Street, New York Give us a Call, Send us a Message, Opening Hours…”)

    Best Regards, and thank you happy.png

  •  625
    Barry replied

    Hi there,

    First of all thank you for your purchase! Let me answer your questions.

    1. You can hide the header topbar by navigating to Appearance -> Customize -> Theme Options -> Topbar by setting the "Topbar" option to "Hide".

    2. This can be hide by navigating to Appearance -> Widgets and remove all widgets from the "Header" panel on the right side of the screen.

    Best regards,
    Barry

  • doorcoupons replied

    hey, thank you for your answer.. i only have two question left.

    1) where can i change the size (height) of the slider on the homepage? when i upload a photo, it is automatically scaled down.

    2) where can i edit the height of the header (menu)? i want to make it a little bit smaller..

    Thank you and best regards

  •  625
    Barry replied

    You're welcome.

    1. The recommend upload size for the slider images is 1920 (width) x 750 (height) pixels. If your uploaded image is bigger than that size it will automatically be scaled down to that size as you probably noticed. The best option is to scale/resize your images to this size with an image editor like https://imageresize.org/ 

    Another option is to set a fixed height to the slider image with some custom CSS and make the image automatically fit this area:

    /* Change slider image height */
    @media (min-width: 992px) {
        .jumbotron .item {
            height: 500px;
            object-fit: cover;
        }
    }
    

    You can add above CSS to Appearance > Customize > Additional CSS. By changing the 500px value in the code you can adjust the height of the slider image.

    2. This will also be possible with some custom CSS. Please use the following:

    /* Change menu height */
    @media (min-width: 992px) {
        .main-navigation > li > a {
            padding-top: 35px;
            padding-bottom: 36px;
        }
        .header .header-wrapper .header-logo {
            height: 99px;
        }
    }
    

    The above code will reduce the total menu bar height with 20 pixels. If you want to reduce it more simply decrease the 3 numeric values ( 35, 36 and 99 ).

    Best regards,
    Barry

  • doorcoupons replied

    Thank you for the response. 

    Regarding the first question:  I think that your CSS part is only working for the first slide of the front slider. Look at image 1&2, they have same dimensions , but the second one is showed in a completely different way with a grey bottom.

    Thank you

    Attached files:  Bildschirmfoto 2019-06-10 um 10.39.58.png
      Bildschirmfoto 2019-06-10 um 10.40.06.png

  •  625
    Barry replied

    Hi there,

    Thank you for adding the screenshots.

    Please replace the CSS from the first questions in my previous message with the following one:

    /* Change slider image height */
    @media (min-width: 992px) {
        .jumbotron .item img {
            height: 500px!important;
            object-fit: cover;
        }
    }
    

    This one should do the trick.

    Best regards,
    Barry

  • doorcoupons replied

    Thank you!

    Can you help me with one more thing: can i move the heading in the front slide at the bottom of the picture & make the heading have a background (transparent)

    Best regards

  •  625
    Barry replied

    Hi there,

    Please add the following CSS code to Appearance -> Customize -> Additional CSS:

    /* Change slide caption position add background */
    @media (min-width: 992px) {
        .jumbotron .jumbotron-caption {
            padding: 20px;
            background: rgba(0, 0, 0, 0.2);
            transform: translate(0%, 20%)!important;
        }
    }
    

    The code will move the slide captions to the bottom area of the image and will add a background with transparency.

    - Change position of the captions

    To change the horizontal position you can adjust the 20% value in above code. 

    - Change opacity of background

    To change the opacity of the background behind the captions you can change the 0,2 value in above code. The available range is 0 till 1, so for example 0.1 or 0.5 will work.

    Hope this helps.

    Best regards,
    Barry

  • doorcoupons replied

    Hey guys, sorry for so many questions. I have a problem with my jump menu. If I press for example "prävention" in the subemenü of "Leistungen" I will jump to the first picture, but i would like to jump like in the second picture (the picture or text should be in the middle of the screen)

    This is my code i used for this Anchor links. I put the ID in the header: <h2 id="sechs">Prävention</h2>

    Attached files:  Bildschirmfoto 2019-06-19 um 10.43.44.png
      Bildschirmfoto 2019-06-19 um 10.44.00.png
      Bildschirmfoto 2019-06-19 um 10.44.07.png

  •  625
    Barry replied

    Hi there,

    Unfortunately it is not possible by default to let # (hashtag) links jump to an element and position that section in the middle of the screen. This is native browser functionality and the browser jumps to the linked element and place it at the top of the browser window. In your case the top of the section is a little bit cut off because of the floating WordPress admin bar at the top of the window.

    The best option is to add an empty page builder row between the two sections with the image and add the ID to this empty row. On this way the "Prävention" section become more visible in the view area of the browser window, please see attached screenshot.

    If you really want to position the section in the middle of the browser window you need to install a plugin like Page scroll to ID. With this plugin you can manage the "offset" which allows you to set the position where the scroll animation need to stop before the section.

    Hope this helps, if you have any questions feel free to ask.

    Attached files:  screenshot01.png

    Best regards,
    Barry

  • doorcoupons replied

    Thank you very much! The plugin worked perfectly. Do you know maybe a plugin which can help me to have a fixed circle on the right side of the screen (like in the attachment). I would like to change the background and the color of the text

    Attached files:  Bildschirmfoto 2019-06-19 um 16.58.47.png

  •  625
    Barry replied

    Great!

    Unfortunately there is no plugin that allows you to do this so specific but with the Advanced Floating Content plugin you can do this by simply adding the round circle with text as an image.

    The fixed position can only be set top top or bottom and left or right I need to say.

    Best regards,
    Barry

  • doorcoupons replied

    ok thank you. one last question for today : i want to change the font to Work Sans. can i do this with css? and how?

  •  625
    Barry replied

    You can change the heading and body font via Appearance -> Customize -> Theme Options -> Typography

    Best regards,
    Barry

  • doorcoupons replied

    ah ok thank you. one small thing (sry): what can i do that "Behandlung" and "Überlastungsproblematiken" are in one vertical line. Best regards

    Attached files:  Bildschirmfoto 2019-06-19 um 18.24.24.png

  •  625
    Barry replied

    You're welcome.

    If you want this text to be in one single horizontal line you have 2 options:

    - Increase the width of the page builder column that contain this text

    - Decrease the font size of this text (see attachment)

    Attached files:  screenshot02.jpg

    Best regards,
    Barry

  • doorcoupons replied

    I don't want it in one single horizontal line , i want the the words start at the same position. my idea:6

    [icon] text

               text

    At the moment it is 

    [icon] text

    text