Home › Forums › Basel support forum › Change header text over to the right hand side instead of the left

Change header text over to the right hand side instead of the left

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 3, 2018 at 6:58 am #80605

    miscar07
    Participant

    I wish to move the email and phone number over to the right hand side instead of the left hand side and change the search icon and cart icon over to the left. Also I wish to make the logo large on the mobile version as it is very small.

    Attachments:
    You must be logged in to view attached files.
    October 3, 2018 at 7:57 am #80626

    Artem Temos
    Keymaster

    Hi,

    Try to add the following code snippet to the Custom CSS for a desktop area in Theme Settings 

    .header-logo-center .wrapp-header {
    direction: rtl;
}
.header-logo-center .right-column {
    text-align: left;
}
.header-logo-center .right-column>div {
        margin-left: 0;
    margin-right: 10px;
}
.header-logo-center .right-column>div:last-child {
    margin-right: 0;
}

    and this part for mobile and tablet devices

    .header-logo-center div.right-column {
    width: 25%;
}

    Regards

    October 4, 2018 at 11:01 pm #81007

    miscar07
    Participant

    Hi it went funny for the phone number etc. It was like the phone number was back to front or something. Also how do I put the icon phone number on one line and then icon and email address on next line. See the widget code that I have used in the bottom

    2006 9482 03
    [email protected]

    Should be

    03 9482 2006
    [email protected]

    Widget.

    <span style=”font-size: 15pt;”><i class=”fa fa-phone”></i><span> 03 9482 2006 </span><i class=”fa fa-envelope”></i><span> [email protected]</span></span>

    Attachments:
    You must be logged in to view attached files.
    October 4, 2018 at 11:04 pm #81009

    miscar07
    Participant

    Also when I use this code

    .header-logo-center div.right-column {
    width: 25%;
    }

    It doesn’t work, no change to the logo size on mobile version

    October 5, 2018 at 6:31 am #81047

    Artem Temos
    Keymaster

    Try to replace previous code with this one

    .header-logo-center .wrapp-header {
    direction: rtl;
}
.header-logo-center .widgetarea-head {
    direction: ltr;
    text-align: right;
}
.header-logo-center .right-column {
    text-align: left;
        direction: ltr;
}
.header-logo-center .right-column>div {
        margin-left: 0;
    margin-right: 10px;
}
.header-logo-center .right-column>div:last-child {
    margin-right: 0;
}
.header-widget.widget_custom_html a {
	display: block;
}
.header-logo-center .site-logo img {
	max-height: none;
}

.header-logo-center .right-column {
    width: 15%;
}
    October 5, 2018 at 6:59 am #81056

    miscar07
    Participant

    Okay I have done this, now this is alot of space under phone number. Also the mobile version logo is still every small with stack of white space underneath.

    October 5, 2018 at 7:42 am #81064

    Artem Temos
    Keymaster

    Move this part of code from desktop to mobile 

    .header-logo-center .site-logo img {
    max-height: none;
}

.header-logo-center .right-column {
   width: 15%;
}

    And remove br tag from your icons http://prntscr.com/l2fbnk

    October 5, 2018 at 8:28 am #81078

    miscar07
    Participant

    mobile logo still small

    October 5, 2018 at 9:38 am #81105

    Artem Temos
    Keymaster

    It has maximum size on mobile http://prntscr.com/l2gti3

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)