Issue with header

  • Issue with header
    Viewing 10 posts - 1 through 10 (of 10 total)

  • trexma
    Participant
    #11625

    Dear Support Team,

    I have some issues with the header in my site:

    1- I use the theme as box layout So when I set the header to 30% transparent the header is having full width, below with a screenshot

    https://snag.gy/NpWQhf.jpg

    2- If I want to have 2 raws in my header and I wanted the first one to be normal and the second one to be transparent, how can I achieve this .

    3- When I set the header to transparent I put the logo as white color and the header is sticky, So when I scroll down the logo will not appear, coz its white and the background is white, Is possible to put different when the header goes to sticky mode


    Ahmed Yasser
    Moderator
    #11626

    Hi trexma,

    1- We will add a fix for this issue in the upcoming update, but for now you can add the following css code to your site.

    .boxedLayout header.preSticky.activeSticky, .boxedLayout header.overlayedHeader {max-width: 970px;}
    @media (min-width: 1200px) { .boxedLayout header.preSticky.activeSticky, .boxedLayout header.overlayedHeader {max-width: 1230px;}

    2- There’s no option to add a transparent background to a row.

    3- There’s no option to change the logo.

    For issue 2 & 3 maybe I can help with custom css if can you send a link to the page, also admin credentials would be great.

    Best Regards.


    trexma
    Participant
    #11628
    This reply has been marked as private.

    trexma
    Participant
    #11629

    Hello Support Team,

    Any update on this please

    Thank you


    Ahmed Yasser
    Moderator
    #11633

    Hi trexma,

    I’ve fixed the header position.

    About number 2. Unfortunately this is not doable in this theme, I tried adding custom css but it broke the row color in responsive.

    For number 3. You can’t change the logo image, but you can change the background of the row when it’s sticky. I’ve already made this change, you can check it on your website.

    About your last request, you can select a different header to appear in a specific page. Right now you’re Using the overlay header option which overlaps with the page title in some pages. All you need to do is create a new header and choose header type to be default Header.

    I’ve added a new header in your theme. When you edit a page, you’ll find a tab called ” (Circleflip) Header Builder ” containing a select drop down that you choose from it which header you want to display for this page.

    Let me know if this fixes your issue.


    trexma
    Participant
    #11634
    This reply has been marked as private.

    trexma
    Participant
    #11635
    This reply has been marked as private.

    Ahmed Yasser
    Moderator
    #11636

    Hi Trexma,

    I fixed the sticky header position, sorry about that. Here’s the overall style that’s been added to your theme:

    .boxedLayout header.preSticky.activeSticky, .boxedLayout header.overlayedHeader {max-width: 970px;margin-left: auto;margin-right: auto;left: 0;right: 0;}
    @media (min-width: 1200px) { .boxedLayout header.preSticky.activeSticky, .boxedLayout header.overlayedHeader {max-width: 1230px;}

    I see you managed to place a global header for all the pages and a custom one for the home.
    If you need any further help, please let me know.

    Best Regards


    trexma
    Participant
    #11637

    Now everything looks fine, but there is one more thing please

    If you look at the home page the breaking news section width is not matching with the slider/site width, we need to fix that please.

    Or if its possible to exclude the breading news from benign transparent, I mean the first 2 raw in the hear to be transparent but the breaking news to be normal

    Thank you


    Ahmed Yasser
    Moderator
    #11649

    Hi trexma,

    I fixed the breaking news section width. I added a custom class to your header row that contains the breaking news block and applied to following css to your theme.

    .breakingNews .movingHead {float: right;}
    @media (min-width: 768px) {.breakingNews .container {width: auto;margin: 0 10px;}}

    Best Regards

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.