Viewing 30 posts - 1 through 30 (of 34 total)
1 2
  • Author
    Posts
  • August 7, 2016 at 7:51 pm #669520
    sitesme

    Hi,

    We would like to add a thin fullwidth bar with a specific color just below the header, between the logo and the slideshow.
    Below the logo (within the bar) we would like to add a slogan.

    These are the areas of both elements: http://dns.d.pr/14aM5/5qmcFNa7

    Is this possible / easy to do?

    Appreciate all your help.

    August 8, 2016 at 9:22 am #669705
    Rikard

    Hey sitesme,

    Do you want it to go on one page only? If so I would try to simply use the builder to add it. Otherwise you could add it to a template and load that template for each new page you add.

    Best regards,
    Rikard

    August 25, 2016 at 12:22 pm #677468
    sitesme

    Hi Rikard,

    That worked and it is fine, however, we would like to make this bar sticky (as the menu). Is there a code I can give to that color section to make it sticky?

    Thank you

    August 25, 2016 at 12:26 pm #677471
    sitesme

    Please check the URL in private.

    We can not have the text 100% aligned with the logo as we would like to. Is it possible to move it like 1px to the left and 1px to the right? What is the code that I can use for this?

    Thank you

    August 29, 2016 at 2:31 pm #678915
    Yigit

    Hi,

    You can refer to this post – http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/ and add a widget area to your header and position is as needed using custom CSS. If you need help, please let us know after adding your content to header.

    Best regards,
    Yigit

    August 29, 2016 at 2:55 pm #678939
    sitesme

    Hi Yigit,

    Thanks for your contribution.

    Please look to the website (in Private).

    I simply want the blue bar below the header permanently fixed with 2 words below the logo (and centered with the logo).

    Many thanks.

    PS – If you have a chance to look into my other post here, I would be very grateful :)

    Fullscreen slider: caption background padding and different colors

    August 29, 2016 at 3:00 pm #678947
    Yigit

    Hey!

    Please add following code to Quick CSS 

    #blue_section {
    position: fixed;
    width: 100%;
    top: 82px;
    z-index: 99;
}

    Cheers!
    Yigit

    August 29, 2016 at 3:04 pm #678952
    sitesme

    Hi Yigit,

    This is the code I have now for the blue_section:

    div#blue_section {
height: 32px;
min-height: 32px;
}

#blue_section {
    position: fixed;
    width: 100%;
    top: 82px;
    z-index: 99;
}

    But it messed up the bar a bit.

    August 29, 2016 at 3:10 pm #678958
    Yigit

    Hey!

    You can now remove that widget from header and blue bar should work fine :)

    Cheers!
    Yigit

    August 29, 2016 at 3:14 pm #678965
    sitesme

    Hi Yigit,

    Removed all code from the widget (functions, CSS and widget itself) but if I keep both code lines (the one I had and the one you gave me) the blue bar simply disappears.

    August 29, 2016 at 10:17 pm #679164
    sitesme

    Yigit,

    Did you fix this problem? I was checking it now and it seems solved?

    The only problem that remains is on mobile. The blue bar is “floating” about 80px from the top when the user scrolls down and the 2 words are not aligned with the logo. Is there any “easy” solution for this?

    Many thanks.

    August 29, 2016 at 11:08 pm #679185
    Yigit

    Hi!

    It must be caching related issue, glad it is solved now :)
    Please change the code to following one 

    @media only screen and (min-width: 990px) {
#blue_section {
    position: fixed;
    width: 100%;
    top: 82px;
    z-index: 99;
}}

    Regards,
    Yigit

    August 30, 2016 at 8:00 am #679278
    sitesme

    Hi Yigit,

    Unfortunately this didn’t produce any results. I’ve cleared Safari’s cache on my mobile to test it.

    Thanks

    August 30, 2016 at 12:51 pm #679379
    Yigit

    Hi,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Yigit

    August 30, 2016 at 1:53 pm #679422
    sitesme

    Hi Yigit,

    Please check below.

    August 30, 2016 at 2:07 pm #679428
    Yigit

    Hey!

    Code i posted here – https://kriesi.at/support/topic/add-a-thin-bar-below-the-header/#post-678947 was still in Quick CSS. Please flush cache and review your website now

    Regards,
    Yigit

    August 30, 2016 at 2:10 pm #679432
    sitesme

    Great Yigit,

    The blue bar is now moving on mobile perfectly fine :)

    Only problem is with the text alignment. Is it possible to have it perfectly aligned with the logo? The text is centred on the “page” but should be centred with the logo width only.

    Thank you

    August 30, 2016 at 2:14 pm #679434
    Yigit

    Hi!

    You edited your text and chose not to center align the text. Please add following code to Quick CSS and that should solve the issue 

    #blue_section .container {
    max-width: 1260px;
}

    Cheers!
    Yigit

    August 30, 2016 at 2:22 pm #679438
    sitesme

    Not quite yet.

    Can you please check what I mean by centered with the logo in the screenshot in PVT?
    Should be the same for computer or mobile screens

    Many thanks

    August 30, 2016 at 2:53 pm #679474
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    

#blue_section .container {
   padding-left: 70px!important;
}

    Best regards,
    Vinay

    August 30, 2016 at 2:59 pm #679480
    sitesme

    Great Yigit,

    It is perfectly aligned with the logo when I change it to 100px, on computer screens.

    However, on mobile it is a bit to the right. Is there a way to create a rule to align it on mobile devices as well?
    Please check the sshots in PVT

    Many thanks

    August 31, 2016 at 9:19 am #679876
    Vinay

    Hi!

    Please use the below code only for the mobile device

    @media only screen and (max-width:480px) {
  #blue_section .container {
   padding-left: 70px!important;
}}

    Regards,
    Vinay

    August 31, 2016 at 9:22 am #679877
    sitesme

    Hi Vinay,

    Unfortunately it didn’t produce any results.

    I even changed to 50px but didn’t move.

    August 31, 2016 at 2:44 pm #679976
    Yigit

    Hi,

    Please remove following code

    #blue_section .container {
    max-width: 1260px;
    padding-left: 100px!important;
}

    and it should work fine :)

    Best regards,
    Yigit

    August 31, 2016 at 2:56 pm #679992
    sitesme

    Hi Yigit,

    If I remove that code it fixes on mobile but it damages the PC version (i.e. the text goes to the left on PC screens)

    This is the code I have now:

    @media only screen and (max-width:480px) {
  #blue_section .container {
   padding-left: 30px!important;
}}

#blue_section .container {
   padding-left: 120px!important;
}
    September 1, 2016 at 3:11 pm #680764
    Yigit

    Hi,

    Please adjust the values using media queries for different screensizes. It does look totally fine on my laptop with the code i posted above.

    Best regards,
    Yigit

    September 1, 2016 at 4:10 pm #680803
    sitesme

    Hi Yigit,

    It does look perfectly fine on my laptop too but once I add the media queries, it messes up with the laptop as well.

    Something is not right…

    September 1, 2016 at 4:21 pm #680808
    Yigit

    Hey!

    Please try add code as following 

    @media only screen and (max-width: 1024px) and (min-width: 990px) {
#blue_section .container {
   padding-left: 90px!important;
}}

    Above is an example code. I checked your custom CSS and there is no error in it so it should not cause any issues. Sorry but this thread got very confusing as what is working fine for me is not working fine for you and that happened a few times already. That is why i am suggesting you to adjust the values as needed :)

    Regards,
    Yigit

    September 1, 2016 at 4:33 pm #680819
    sitesme

    Ok, it works now but with a problem still…

    The full code I have for the blue_bar section is:

    div#blue_section {
height: 32px;
min-height: 32px;
}

#blue_section .container {
   padding-left: 120px!important;
}

@media only screen and (min-width: 990px) {
#blue_section {
    position: fixed;
    width: 100%;
    top: 82px;
    z-index: 99;
}}

@media only screen and (max-width:480px) {
  #blue_section .container {
   padding-left: 70px!important;
}}

@media only screen and (max-width: 1024px) and (min-width: 990px) {
#blue_section .container {
   padding-left: 0px!important;
}}

    The new problem is when I rotate my mobile from portrait to landscape, it is no longer aligned with the logo in landscape…
    But I guess this will be impossible to fix as there are so many screen size combinations? Please confirm.

    September 1, 2016 at 4:45 pm #680834
    Yigit

    Hey!

    Can you please post a screenshot of the issue so we can make sure that we are seeing the same thing? :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 34 total)
1 2
  • The topic ‘Add a thin bar below the header’ is closed to new replies.