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

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.

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

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
info@lifeworksphotography.com.au

Should be

03 9482 2006
info@lifeworksphotography.com.au

Widget.

<span style=”font-size: 15pt;”><i class=”fa fa-phone”></i><span> 03 9482 2006 </span><i class=”fa fa-envelope”></i><span> info@lifeworksphotography.com.au</span></span>

Attachments:

You must be logged in to view attached files.

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

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%;
}

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.

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

mobile logo still small

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

[Author]

Posts