Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • September 24, 2020 at 7:00 am #1248049
    spottydog63

    Hi There.

    I have added a Widget to the Header Area so as to display a Phone Number.
    It is positioned on the right hand side of the Header.
    And I also have the Social Icons displaying to the right of this.
    The Logo is set to display on the Left Hand side of the Header.

    I have added the following CSS:

    #header .widget {
    left: auto;
    right: 90px;
    padding-top: 47px;
    position: absolute;
    top: 0;
    transform: translate(-0%);
    z-index: 999999;
    font-size: 20px;
    font-weight: bold;
    }

    .main_menu {
    width: 100%;
    }
    #top nav .social_bookmarks {
    float: right;
    left: auto;
    width: 10%;
    }

    My problem is that I wish to “vertically” center the Header Widget text and keep it horizontally inline with the Social Icons.

    At the moment, I have just increased the top padding to bring it down, but of course, as the screen size becomes smaller, it moves out of alignment.

    I would also like the Header Widget and the Social Icons to shift under the Logo when viewing on a Mobile Phone, with the Burger Menu to the right.

    Is this possible?

    Regards
    Iain Kennedy

    September 25, 2020 at 5:13 am #1248307
    Rikard

    Hey spottydog63,

    Thanks for the login details. Please try this CSS as well:

    @media only screen and (max-width: 767px) {
#custom_html-3 {
  padding-top: 28px;
}
}

    Best regards,
    Rikard

    September 25, 2020 at 6:38 am #1248321
    spottydog63

    Hi Rikard.

    What is that css meant to do?
    I have added it, but nothing has changed
    And wouldn’t I need to change the existing css as well?

    Regards
    Iain

    September 25, 2020 at 6:40 am #1248323
    spottydog63

    The Burger menu still appears on the Left, and the Header Widget still misaligns on a smaller screen, and it overlaps the Logo.

    Regards
    Iain

    September 25, 2020 at 6:59 am #1248329
    spottydog63

    Sorry, my mistake.
    I added !important after the 28px, and the text now remains inline.

    However, the other parts of my question remain unchanged.

    ie. The phone number text overlaps the Logo, the social icon disappears, and the burger menu is on the left.

    Regards
    Iain

    September 25, 2020 at 12:38 pm #1248418
    Victoria

    Hi Iain,

    Best regards,
    Victoria

    September 26, 2020 at 3:56 am #1248548
    spottydog63

    How do I move the Burger Menu from the Left of screen to the Right of screen?

    Regards
    Iain

    September 26, 2020 at 4:48 am #1248549
    spottydog63

    Hi guys.

    Big problem.
    I’ve just noticed that the Burger Menu isn’t working.
    Any idea why?

    Regards
    Iain

    September 26, 2020 at 5:26 am #1248554
    spottydog63

    Hi guys.

    I’m going to close this.
    I’ve undone everything to revert to something that works, and just changed the Logo instead.
    Not ideal, but it serves it’s purpose for now.

    Regards
    Iain

    September 26, 2020 at 11:01 am #1248616
    Victoria

    Hi spottydog63,

    Do you need more help on this issue or can we close it?

    Best regards,
    Victoria

    September 26, 2020 at 10:39 pm #1248724
    spottydog63

    Hi Victoria.

    You can close it.
    I may have a crack at doing things differently later, but for now I’ll stick with what I have.

    Regards
    Iain

    September 27, 2020 at 6:52 pm #1248846
    Victoria

    Hi spottydog63,

    Ok :)

    We are closing the thread.

    If you need further assistance please let us know in a new one.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Header Widget’ is closed to new replies.