Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #1333385

    How can I fix the mobile header for this website (see image)? I need to:
    Remove the Search Button
    Move the Header to the left so it doesn’t overlap the hamburger menu


    I tried removing the search button with the following code, but it doesn’t seem to work.

    /* Hide Search on Mobile */
    @media only screen and (max-width: 1200px) {
    nav.main_menu #menu-item-search {
    display: none;

    The header also has been adjusted for size, positioning and an additional widget for the desktop.



    Image 2021-12-18 10-24-31 2021-12-18 at 10.34.14 AM.png _- Photos


    Thank you for the login, to correct your mobile header I had to adjust your custom css for the social_bookmarks by putting it in a media query like this:

    @media only screen and (min-width: 767px) { 
    #top #header .social_bookmarks li a {
        font-size: 25px;
    #top .social_bookmarks li {
         margin: 0 5px;

    and I had to add your “make header larger & move over” css to another media query like this:

    @media only screen and (min-width: 1440px) { 
    	/* Make header larger & move over */
    #header_main .logo, 
    #header_main .logo a {
        overflow: visible;
    #header_main .logo img {
        height: 90px;
        position: relative;
        max-height: none;
        right: -90px;
        top: 15px;
    #top nav .social_bookmarks {
       float: right;
       left: auto;
       width: 10%;

    But I notice your desktop your header widget is overlapping your social_bookmarks because you have it set to right: 300px;, I would recommend using right: 30%; instead.

    Best regards,


    Looks great, thanks so much!


    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Fix the Header on Mobile’ is closed to new replies.