Return to previous page

Header Options on Desktop and Mobile - by TheOne

This topic has 22 replies, 3 voices, and was last updated 6 years, 10 months ago ago by Rose Tyler

  • Avatar: TheOne
    TheOne
    Participant
    May 25, 2018 at 20:49

    Hello,

    I noticed that not all functions can be enabled for all headers. Is this normal ?

    I have the “Variant simple” selected as my header. Is it possible to add the two text fields in the middle of it like in the “Advanced” header ?

    The thing is i want to show phone number and email in there. I could use “Advanced” menu but i don’t like the search field (i prefer the icon) and the text fields are vertically unalligned if i remove the search field.

    Another problem is that on the mobile phone no feilds are showing (talking about the header). I would love to set a top bar just for mobile where the phone number would be visiable.

    That’s also a question for my upcoming projects. The theme “electronics” is perfect for what i need on my next project but it has to show some info (like phone and email or just one) in header on mobile view.

    Is this doable ?

    #193635 Copied
    21 Answers
    Avatar: TheOne
    TheOne
    Participant
    May 25, 2018 at 22:37

    I found excatly what i need for desktop vesrsion on another topic:

    https://www.8theme.com/topic/header-and-searchbar-strange-paddings/
    IMAGE: https://gyazo.com/6ba758f5be4d9c3e7b126993c3869d8f

    Excatly the same layout without the top panel and with my account, search and cart icons on the right.

    #193637 Copied
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    May 26, 2018 at 11:14

    Hello,

    1) Yes, some headers have the custom HTML area, other – not.
    2) If you like the header type from the screenshot then choose the variant – Standard.
    3) By default top bar and custom HTML area are hidden on the mobile devices because there is no place to show a lot of content on mobile devices. But if you don’t plan to add a lot of information in that area, probably we will be able to help you to show it for the mobile devices. Please, choose the desired header type, add the necessary information to the custom HTML area and then provide us the link to your site and temporary Dashboard access. We’ll check what code you need to add or change to show it in the correct way for mobile devices.

    Regards

    #193651 Copied
    Avatar: TheOne
    TheOne
    Participant
    May 27, 2018 at 00:38

    Hey,

    1. Thank you for the explanation.

    2. I did. But the thing is the whole bar and text are not alligned and the search icon is missing on the right. Picture above:

    You can see it on the page.

    3. That would be really nice, becouse i really need some kind of info on mobile.

    Access in private.

    Thank you,

    Please, contact administrator
    for this information.
    #193663 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 29, 2018 at 12:38

    Hello,

    1. You’re welcome!
    2. The problem caused by your custom css – http://prntscr.com/jo0ob9 Try to change the code to:

    .navigation-wrapper .menu-inner {
    border: none;
}
.header-standard .navigation-wrapper .header-search {
    position:  absolute;
    display:  block;
    right: 25%;
    top: 60%;
}

    3. Please add this code in Global Custom css:

    @media only screen and (max-width: 992px) {
    .header-standard .header-widgets {
        display:  block;
        width: 100%;
        margin-left: -14%;
        margin-top: 18px;
    }
    .header-standard .header-widgets p {
        text-align: center;
        font-size:  11px !important;
        margin-bottom: 0px;
    }
    .header-standard .header-widgets i {
        display:  none;
    }
}
@media screen and (max-width: 480px){
    .header-standard .header-widgets {
        width: 50%;
        margin-left: 30%;
        margin-top: 0px;
    }
}

    Regards

    #193769 Copied
    Avatar: TheOne
    TheOne
    Participant
    May 31, 2018 at 14:22

    Hey,

    So this kinda work. To reply back:

    2. Can i insert an icon beside the cart and my account icon ? Rather that the whole search bar ? So the menu can be horizontally alligned ?

    3. Thank you very much ! I corrected the margin-top value and it shows very nice on mobile.
    On desktop however (if you resize the windows to the max) you will notice that it overlaps the logo.

    Please, contact administrator
    for this information.
    #194009 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 31, 2018 at 14:44

    Hello,

    2. Please provide a screenshot for better understanding the desired result.
    3. You’re welcome! I do not see the problem. What screen size should I check?

    Regards

    #194011 Copied
    Avatar: TheOne
    TheOne
    Participant
    May 31, 2018 at 15:09

    Hey,

    Thank you for a quick reply.

    2. Screenshot is in private marked as 1aS.
    3. On mobile version the layout is fine. On desktop just resize the window horizontally to the minimum. Please see screenshot marked as 1bS.

    Please, contact administrator
    for this information.
    #194014 Copied
    Avatar: TheOne
    TheOne
    Participant
    May 31, 2018 at 15:11

    2. Basiclly all i wanted was a “variant simple” header with text in the middle…
    3. This is probably (i guess) becouse we added costum text information to the header in mobile version earlier.

    #194015 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 1, 2018 at 10:00

    Hello,

    By default, there is no option to change the search to the icon, this request additional customization. Copy standard.php file from xstore/headers to child-theme/headers folder and change this https://prnt.sc/jpdk29 to https://prnt.sc/jpdk29 (this code should be deleted https://prnt.sc/jpdjw9)
    + add this code in Theme Options > Styling > Custom css > Custom css for desktop:

    .navbar-header .header-search {
    order: -1;
}
.navbar-header {
    display:  flex;
}
.navbar-header.show-in-header > * {
    padding: 0 1em 0 0;
}
.navbar-header.show-in-header > *:last-child {
    padding-right:  0;
}

    To align your text to center, you need to change this code (Header custom HTML):

    <div class="row">
<div class="col-md-6">
<p style="font-size: 17px; color: #232f3e;"><i class="fa fa-phone" style="font-size: 19px; margin-right: 10px;"></i>Kontaktna številka <span style="color: #232f3e; font-weight: bold;">051 385 324</span></p>
</div>
</div>

    to:

    <div class="row custom-contact-information">
<p style="font-size: 17px; color: #232f3e; text-align: center"><i class="fa fa-phone" style="font-size: 19px; margin-right: 10px;"></i>Kontaktna številka <span class="contact-number" style="color: #232f3e; font-weight: bold;">051 385 324</span></p>
</div>

    and delete previouse custom css code http://prntscr.com/jpf0xb then let me know I will give you a new one.

    Regards

    #194065 Copied
    Avatar: TheOne
    TheOne
    Participant
    June 1, 2018 at 13:10

    Hey,

    Thank you for taking all of this time ! I’ll make sure to leave a good review. Next time it will probably be better for me to make some research in advance for what i want.

    You wrote:

    “Copy standard.php file from xstore/headers to child-theme/headers folder and change this https://prnt.sc/jpdk29 to https://prnt.sc/jpdk29 (this code should be deleted https://prnt.sc/jpdjw9)”

    As you can see here you wrote “change this -“- to -“-. The links (printscreens) are the same.

    – Deleted described code in standard.php
    – Added the provided code in costum CSS for desktop
    – Changed costum HTML
    – Deleted costum css code ( http://prntscr.com/jpf0xb )

    Nothing has happend i suppose it’s becouse of the first problem i described.

    #194085 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 1, 2018 at 13:18

    Hello,

    Sorry for screenshots, this https://prnt.sc/jpdk29 should be changed to https://prnt.sc/jpdk6b.
    You need to create empty headers folder in your child theme folder. Add standard.php file inside headers folder of the child theme. Here is the new content of standard.php file:

    <?php 
    $ht = etheme_get_header_type();
    $color = etheme_get_header_color();
    $menu_class = 'menu-align-' . etheme_get_option('menu_align');
?>

<div class="header-wrapper header-<?php echo esc_attr( $ht ); ?> header-color-<?php echo esc_attr( $color ); ?>">
    <?php get_template_part('headers/parts/top-bar'); ?>
    <div class="header-bg-block">
        <header class="header main-header">
            <div class="container">
                <div class="container-wrapper">
                    <div class="header-logo"><?php etheme_logo(); ?></div>
                    <div class="header-widgets">
                        <?php etheme_option('header_custom_block'); ?>
                    </div>
                    <?php etheme_shop_navbar( 'header' ); ?>
                    <div class="navbar-toggle">
                        <span class="sr-only"><?php esc_html_e('Menu', 'xstore'); ?></span>
                        <span class="et-icon et-burger"></span>
                    </div>
                </div>
            </div>
        </header>
        <div class="navigation-wrapper">
            <div class="container">
                <div class="menu-inner">
                    <div class="menu-wrapper <?php echo esc_attr($menu_class); ?>">
                        <?php et_show_secondary_menu(); ?>
                        <?php etheme_get_main_menu(); ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php if((!function_exists('dynamic_sidebar') || !dynamic_sidebar('header-banner'))): ?>
    <?php endif; ?>
</div>

    Regards

    #194090 Copied
    Avatar: TheOne
    TheOne
    Participant
    June 3, 2018 at 22:28

    Hey,

    While search did appear as an icon like we talked about, the whole website (bellow the header) went blank.

    #194135 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 4, 2018 at 07:16

    Hello,

    Try to enable WP debug mode to find out what error appears on your site, it will point you in the right direction what you need to fix. If you don’t have the necessary skills you can submit customization request to WPKraken team.
    Or provide us with temporary FTP access (FTP hostname, FTP username, FTP password) so we can take a closer look.

    Regards

    #194146 Copied
    Avatar: TheOne
    TheOne
    Participant
    June 5, 2018 at 12:56

    I did run the debug mode but nothing came up.

    Since we are almost there (and it’s probably a small thing somewhere) i have created a temporary FTP access, if you could take a look.

    Please, contact administrator
    for this information.
    #194299 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 5, 2018 at 13:15

    Unfortunately, we can’t connect:
    Error: Could not connect to server
    Please check.

    Regards

    #194302 Copied
    Avatar: TheOne
    TheOne
    Participant
    June 5, 2018 at 13:34

    Sorry, you have to connect with port 6021. Login credentials are fine.

    Please, contact administrator
    for this information.
    #194308 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 5, 2018 at 13:50

    Hello,

    Please clear cache and check now.
    Also, I would recommend you to contact server admin and ask to check all your files. Looks like some files, for example – functions.php, contain malware code, (that is not contained in theme archive, which can be downloaded on ThemeForest).

    Regards

    #194318 Copied
    Avatar: TheOne
    TheOne
    Participant
    June 5, 2018 at 22:45

    Works like a charm i really appriciate your help. I will call them tommorrow.
    Couple of posts back you mentioned that you will paste the new code for the costum text in the header.

    This code doesn’t work anymore:

    @media only screen and (max-width: 992px) {
    .header-standard .header-widgets {
        display:  block;
        width: 100%;
        margin-left: -14%;
        margin-top: 18px;
    }
    .header-standard .header-widgets p {
        text-align: center;
        font-size:  11px !important;
        margin-bottom: 0px;
    }
    .header-standard .header-widgets i {
        display:  none;
    }
}
@media screen and (max-width: 480px){
    .header-standard .header-widgets {
        width: 50%;
        margin-left: 30%;
        margin-top: 0px;
    }
}
    #194358 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 6, 2018 at 07:29

    Would you mind to rate our product:
    http://prnt.sc/d256m6
    https://themeforest.net/downloads
    That would be much appreciated 🙂

    Where have you added this code?

    Regards

    #194370 Copied
    Avatar: TheOne
    TheOne
    Participant
    June 6, 2018 at 08:44

    I added it in Global Custom css. I need that text back in header on mobile devices.

    #194380 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 6, 2018 at 09:34

    I do not see the code in your Global Custom css area (Theme Options). Please add it and check the text one more time. Let me know the result.

    Regards

    #194385 Copied
  • Viewing 22 results - 1 through 22 (of 22 total)

You must be logged in to reply to this topic.Log in/Sign up

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Dokan Multivendor Marketplace – WordPress WooCommerce Theme
lazy-placeholder
Medical 02 – WordPress WooCommerce Theme
lazy-placeholder
Spice Store – WordPress WooCommerce Theme
lazy-placeholder
Grocery Mega Market – WordPress WooCommerce Theme
lazy-placeholder
Electron Store 02 – WordPress WooCommerce Theme
lazy-placeholder
Minimal Fashion Store – WordPress WooCommerce Theme
lazy-placeholder
Cosmetics Store – WordPress WooCommerce Theme
lazy-placeholder
Handtools Store – WooCommerce Theme
lazy-placeholder
Jewellery Niche Market – Multivendor WP WooCommerce Theme
lazy-placeholder
Shoes Store – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.