• Closed
  • Ed Torque
    Spectator
    27.12.2015 at 14:34 #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: 2656
    28.12.2015 at 06:42 #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
    28.12.2015 at 13:12 #23262
    This reply has been marked as private.
    Ed Torque
    Spectator
    Posts: 20
    29.12.2015 at 00:23 #23271
    This reply has been marked as private.
    Denzel Chia
    Moderator
    Posts: 2656
    29.12.2015 at 09:27 #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
    30.12.2015 at 05:50 #23296
    This reply has been marked as private.
    Imran
    Spectator
    Posts: 402
    13.02.2016 at 15:10 #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
    19.02.2016 at 15:33 #24472
    This reply has been marked as private.
    Denzel Chia
    Moderator
    Posts: 2656
    20.02.2016 at 09:24 #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
    21.02.2016 at 23:22 #24542

    Hi Denzel, this worked. thanks a lot!

    Denzel Chia
    Moderator
    Posts: 2656
    22.02.2016 at 02:32 #24547

    You are welcome !