Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 1, 2017 at 5:08 pm #770370
    cerasel

    Hi there, I hope you’re doing great!

    I would need your help to adjust the way the header extra elements and header height are displayed on the mobile version of my site.

    Here are my existing extra elements settings in Enfold child: http://www.screencast.com/t/9xMyRdY5b
    And here is how these elements and header show up on an iPhone 5s: http://www.screencast.com/t/NCG3uLANzGrc

    1/ I would like the extra elements (i.e. the AJAX search icon, the qtranslate widget under phone info, and the social profile icons) to be displayed on the same line with the logo and main menu icon, or at least have all of these extra elements together on a single line above the logo and main menu icon, aligned left.

    2/ I would also like to narrow down the white area under the header. I assume the large space comes from the fact that there is a hidden text block for the language switch before the layer slider, but that space looks much larger on a mobile that on my computer and should be shrinkable.

    I appreciate your help with this as I have already tried some self-made Quick CSS combinations without success!

    All the best,

    Cerasel

    April 4, 2017 at 3:22 pm #771822
    Victoria

    Hey cerasel,

    Here is the css 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 .phone-info {
    width: 15%;
    margin-top: -31px;
    margin-left: 33%;
    float: right;
}

.responsive #header .sub_menu {
	width: 20%;
	padding-top: 11px;
	float:left;
	margin-left: 40%;
}


.responsive #header .social_bookmarks {
   width: 17%;
   margin-top: 7px;
   float: left;
   margin-left: -38px;
   min-width: 100px;
 }
}

    Aligning search to the left is not a good idea, search form gets beyond screen to the left. You can adjust these settings as to what you like.

    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 24, 2017 at 12:21 pm #782259
    cerasel

    Dear Victoria,

    Thank you for your help. I have added the code a few days ago under Quick CSS but I think it may have crashed my site and I cannot find a way to remove it from the WP interface or even using FTP access (I can’t manage to find Quick CSS under enfold-child in the themes section, and the files for enfold-child appear to have last been edited over a year ago when in fact I have amended the quick css code mid-April this year: https://www.screencast.com/t/ZWdwun7FWRz).

    Do you think you could help me remove the code and find another solution for the mobile display?

    I appreciate your help with this.

    Best regards,

    Cerasel

    April 25, 2017 at 6:20 am #782655
    Rikard

    Hi,

    Could you please try to overwrite the theme files with a fresh copy from your Themeforest account via FTP to see if that helps? http://kriesi.at/documentation/enfold/updating-your-theme-files/

    If that doesn’t help then please try to rename the plugin folder of your site using FTP in order to disable all plugins.

    Best regards,
    Rikard

    April 25, 2017 at 9:18 pm #783104
    cerasel

    Hi,
    Thank you so much, option b (renaming the plugins folder just enough time to adjust the Quick CSS) worked fine, I just had to reactivate the plugins manually once I renamed the folder back but now everything is back to normal!
    I have pasted the code from Victoria into the css file under Enfold child in FTP and it looks like it could hold up better.
    Thanks again!
    Best,
    cerasel

    April 26, 2017 at 12:49 pm #783429
    Rikard

    Hi,

    Great, glad you got it working and thanks for the feedback. Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.