• Closed
  • Ed Torque
    Spectator
    December 27, 2015 at 2:34 pm #23255

    Hi,

    When Header #4 is active there are two menu bars, one above the logo and one below. When viewing the home page on mobiles these bars become buttons, and with the logo, social media icons, and search box they occupy 90% of the screen. I am not a developer so I’d appreciate input that I can do through admin options or custom CSS.

    Would you let me know:
    a) Is it possible to consolidate everything in one line: reduce the size of the logo in mobile view, replace the two menu bars with two menu icons, and have them be located to the sides of the logo?
    b) Can the top bar be disabled on mobile devices?
    c) Can the search box be disabled on mobile devices?

    I am using latest version of WordPress and Alora.

    Thank you in advance,

    Ed

    Denzel Chia
    Moderator
    Posts: 2672
    December 28, 2015 at 6:42 am #23261

    Hi,

    a) Is it possible to consolidate everything in one line: reduce the size of the logo in mobile view, replace the two menu bars with two menu icons, and have them be located to the sides of the logo?

    This is not possible just by providing custom css code. You need to hire a developer for this modification.

    b) Can the top bar be disabled on mobile devices?

    Please use the following in Theme Options -> Custom CSS

    @media screen and (max-width:768px){
    .mobile-topnav-holder{
    display:none !important;
    }
    }

    c) Can the search box be disabled on mobile devices?

    Please provide your website url. I need to see your search box.

    Thanks!

    Ed Torque
    Spectator
    Posts: 20
    December 28, 2015 at 1:12 pm #23262
    This reply has been marked as private.
    Ed Torque
    Spectator
    Posts: 20
    December 29, 2015 at 12:23 am #23271
    This reply has been marked as private.
    Denzel Chia
    Moderator
    Posts: 2672
    December 29, 2015 at 9:27 am #23277

    Hi,

    Please use the following codes.

    @media screen and (max-width:768px){
    #searchform{
    display:none !important;
    }
    }

    You need to clear your plugin cached content.

    Thanks!

    Ed Torque
    Spectator
    Posts: 20
    December 30, 2015 at 5:50 am #23296
    This reply has been marked as private.
    Imran
    Spectator
    Posts: 403
    February 13, 2016 at 3:10 pm #24315

    Hi Ed,

    Thanks for writing in!

    In order to suppress the top bar on mobiles, please add the following code under your custom CSS field:

    @media only screen and (max-width: 767px) {
    .header-v4 .header-social .alignleft {
    display: none;
    }
    }

    reduce the size of the logo in mobile view

    Please add the following code into your custom CSS:

    @media only screen and (max-width: 767px) {
    .header-v4 #header {
    padding: 0px 0px;
    }
    }

    Hope this helps.

    Thank you!

    Ed Torque
    Spectator
    Posts: 20
    February 19, 2016 at 3:33 pm #24472
    This reply has been marked as private.
    Denzel Chia
    Moderator
    Posts: 2672
    February 20, 2016 at 9:24 am #24492

    Hi,

    You want to remove the top bar in mobile?

    @media screen and (max-width:768px){
    .header-social {
    display: none !important;
    }
    }

    Thank you

    Ed Torque
    Spectator
    Posts: 20
    February 21, 2016 at 11:22 pm #24542

    Hi Denzel, this worked. thanks a lot!

    Denzel Chia
    Moderator
    Posts: 2672
    February 22, 2016 at 2:32 am #24547

    You are welcome !