Tagged: ,

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • January 31, 2018 at 7:26 pm #905715
    BC_mne

    Hi,
    I would like to move language icons to the top left on mobile, and move phone number to the top right. Is there an option in the theme, or you can provide me with some CSS? :)

    January 31, 2018 at 8:22 pm #905753
    Jordan Shannon

    Hey andrijadulovic,

    Are you looking to have it flush with the social media icons or beneath them?

    Best regards,
    Jordan Shannon

    January 31, 2018 at 11:50 pm #905903
    BC_mne

    I would to see it all in one row.

    February 2, 2018 at 7:51 am #906695
    Ismael

    Hi,

    Please use the following css codes.

    @media only screen and (max-width: 767px) {
  .responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
      float: left;
      width: 100%;
      text-align: left;
      margin: 0 auto;
      position: fixed;
  }

  .responsive .phone-info {
      float: right;
      width: 100%;
      clear: both;
      text-align: right;
      position: fixed;
      right: 20px;
  }
}

    Best regards,
    Ismael

    February 2, 2018 at 10:06 am #906740
    BC_mne
    This reply has been marked as private.
    February 4, 2018 at 8:13 am #907392
    Victoria

    Hi andrijadulovic,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  .responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
    width: 30%;
    float: left;
    margin-top: -16px;
  }
   #top #header_meta .phone-info {
       width: 30%;
       float: right;
       margin-top: -32px;
   }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    February 11, 2018 at 5:39 pm #910767
    BC_mne

    Did you even check this? I put the code in CSS editor and it shows 5 errors. And it is only moving the phone number, not the flag.

    February 12, 2018 at 7:49 pm #911290
    Basilis

    Hi,

    I loaded your web site and the code is not there, can you check with us please if you have added so we can be able to debug?

    Best regards,
    Basilis

    February 13, 2018 at 9:26 am #911575
    BC_mne

    I am not going to put code that is not working on my website. You can try this code in your own CSS editor, it will flash you with several bugs. All I am asking is for you to check the code before you send it to me. I know that using inspector you can test what you are sending.

    February 13, 2018 at 10:04 pm #911912
    Basilis

    Hi,

    The code is not wrong.
    A web editor can show different things but they are not valid.
    I tried Victorias code and it is working fine.

    Best regards,
    Basilis

    February 13, 2018 at 10:39 pm #911948
    BC_mne

    It is not good, because the flag is fading out while resizing the screen and it is not showing. I added the code and there is no flag on small screen, for example iPhone 5S. Please check it.

    February 14, 2018 at 3:34 am #912062
    Ismael

    Hi,

    The css codes are working properly on our end. Please provide the login details in the private field and we’ll test it.

    Best regards,
    Ismael

    February 14, 2018 at 11:43 am #912208
    BC_mne

    OK, I got you the credentials.

    February 16, 2018 at 3:09 am #913051
    Ismael

    Hi,

    I’m sorry for the late response. Please set the user to admin so that we can edit the css modifications.

    Best regards,
    Ismael

    February 16, 2018 at 10:45 am #913197
    BC_mne

    Done.

    February 17, 2018 at 6:44 am #913512
    Victoria

    Hi BC_mne,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  .responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
    width: 50%;
    float: left;
    margin-top: -16px;
    margin-left: 11%;
  }
   #top #header_meta .phone-info {
       width: 30%;
       float: right;
       margin-top: -32px;
   }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    February 17, 2018 at 2:35 pm #913648
    BC_mne

    Just for you to know, this is what I wanted to achieve:

    @media only screen and (max-width: 767px) {
    .responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
    width: 50%;
    float: left;
    margin-top: -16px;
    }
    #top #header_meta .phone-info {
    width: 30%;
    float: right;
    margin-top: -32px;
    margin-right: -16px
    }
    }

    Thanks. You can close this now. Best wishes!

    February 18, 2018 at 6:59 am #913766
    Rikard

    Hi,

    Great, glad you got it working and thanks for sharing. I’ll close this for now, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Change position of elements in the top bar on mobile’ is closed to new replies.