• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Marek
  • Private: No
  • Open Date: 04.02.19, 09:35
  • Opened by: Botter Sylvain
  • Closed by: Marek
  • Closed on: 01.03.19, 16:18
  • Reason: Closed
  • Comment: Glad to help!

Ticket #13667 - Aligning "header right-side relative" to right

Hi! Hope you had a great weekend?

I tried to align “header right side relative” to the right, but cannot. I tried quite everything, maybe I dont have the full understanding of the thing :(

This is all the codes I added:

Everything “looks” fine apart that right icons that I cannot put on the same line and aligned to the right, do you think you can spot what is wrong? Attached the inspect chrome page!

THANKS a lot

/* 
  ##SMARTPHONE  
*/

@media (min-width: 320px) and (max-width: 767px) {
  
.header-main > .page-width #pk_top_menu {
    order:1;
    }
    
.header-main > .page-width .header_logo {
    order:2;
    width: 40%;
}
    
.header-main > .page-width .header-right-side {
    order:3;  
    width: 20%;
    }
    
#header .header-main>.page-width {
    height: auto;
    padding: 20px 0;
}
  
   
/* hamburger icon  */
    
.header-1 .icon_menu {
    margin: 0 !important;
    padding-top: 50px;
}   
    
    
    
/* custom header */

.header-main {
    font-size: 13px;
    font-family: 'Open Sans';
    font-weight: 600;
    font-style: normal;
    line-height: 1em;
    text-transform: uppercase;
    background-color: #FFF!important;
    letter-spacing: .03em;
    height: 52px !important;
}

.page-width.flex-container.container {
    height: 52px !important;
}

#header .header-main>.page-width {
    height: 100px;
}

#header .logo {
    max-width: 60%;
    padding-bottom: 8em;
}

.header_logo {
    height: 52px;
}

#header .header-main>.page-width {
    padding: 0;
}

.header-1 .icon_menu {
    margin: auto;
}


Comments

Marek 04 Feb 2019, 10:58

Try following CSS code:

@media (max-width:800px) {
    body #pattern .header-1 .header-main > .page-width {
        flex-direction: row;
    }
    #header #pk_top_menu {width:auto}
    #header #pk_top_menu .icon_menu {padding:0}
    #header #top-menu {width:300px}
}
Botter Sylvain 04 Feb 2019, 11:21

Amazing…so perfect :) :)

You made my day with that, I was desesperate!!
thanks

Marek 05 Feb 2019, 12:14

You are welcome
You can support our theme and service if you like it. You could rate it here http://themeforest.net/downloads