Return to previous page

Help on modifying website and mobile header

This topic has 20 replies, 3 voices, and was last updated 7 months, 2 weeks ago ago by Andrew Mitchell

fyshlas

Participant

April 4, 2024 at 10:31

Hello i need some help modifying the header-structure-2.php (i have added it to child theme) to reach my desired design.

I am having trouble with the Account login icon as it displays both the links My account and logout when a user is logged in. How can i hide this and only display the icon and Sign in ( see screenshots) and Icon and name if the user is logged in?

Also when this is sorted out i want the sticky header to be this header how can i change the predesigned sticky to the same header i am refering to above.

For the mobile version i have managed to add the Sign in icon and hide the text but its not clickable. Also i will need the mobile sticky to be the same for the header.

Can you please guide me through this?

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#389999 Copied Theme version: 693

19 Answers

Rose Tyler

Support staff

April 4, 2024 at 12:13

Hello, Fyshlas,

We appreciate you contacting us for support regarding the customization of your header.

We would like to kindly inform you that our responsibility does not extend to custom modifications within the child theme, as this falls beyond the purview of our standard support services.

Additionally, we have noticed that multiple queries were included in your previous communication. For clarity and efficiency, we kindly request that each question be submitted individually in future correspondences.

To proceed with your request, we would be grateful if you could provide us with FTP access. Upon receipt, one of our specialists will review the situation and determine the best course of action to assist you.

For FTP access, we require the following details: FTP host, FTP username, FTP password, FTP port, and FTP encryption type. If you need assistance in creating these credentials, please reach out to your hosting provider who will guide you through the process.

Best Regards,
8Theme’s Team

#390040 Copied

fyshlas

Participant

April 4, 2024 at 12:18

Hello thank you for the clarifications and thank you for taking the time to view this.

ftp access has been granted

Please contact administrator
for this information.

#390044 Copied

fyshlas

Participant

April 5, 2024 at 06:18

Hello guys any update on the request?

#390148 Copied

Rose Tyler

Support staff

April 5, 2024 at 08:45

Hello, Fyshlas,

We hope this message finds you well. We would like to inform you that our team is currently working diligently on the matter at hand. It would be greatly appreciated if you could refrain from making any changes in the interim to ensure that our efforts are not inadvertently counterproductive to one another.

Thank you for your understanding and cooperation.

Best Regards,
8Theme’s Team

#390187 Copied

fyshlas

Participant

April 5, 2024 at 09:00

Wow. Thank you for taking the timein helping me with this matter. No changes will be made by my part. When you finish can you please inform me on what code has been added and where its located?

Thank you in advance

#390191 Copied

Rose Tyler

Support staff

April 5, 2024 at 10:32

Hello, Fyshlas,

Thank you for your cooperation.

We have reviewed the changes regarding the Account icon as per your request.

Private Content

Best Regards,
8Theme’s Team

Please contact administrator
for this information.

#390214 Copied

fyshlas

Participant

April 5, 2024 at 12:24

Wow thank you for taking the time to help me with this, it looks great.

I will be waiting for your update regarding the other modifications i kindly asked for.
Thank you again

#390232 Copied

Rose Tyler

Support staff

April 5, 2024 at 13:40

Hello, Fyshlas,

We kindly request that you provide us with a detailed description of the task at hand to ensure there is no room for misinterpretation. Could you please elaborate on the specific actions that need to be taken and the expected outcome?

We appreciate your cooperation in this matter.

Best Regards,
8Theme’s Team

#390250 Copied

fyshlas

Participant

April 5, 2024 at 15:22

Sure, i would like to know how i can achieve the same design for the sticky header (replace the current one and make it the same with the header )(header-structure-2.php) for the Website/Desktop . Also how can i hide the search form the sticky header only?

And for the mobile view you edited i cannot figure out where to add the shortcode [aws_search_form] on both the header and sticky header to be displayed below the header (like on screenshot)

Thank you for you time and urgent response

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#390269 Copied

Rose Tyler

Support staff

April 6, 2024 at 15:00

Hello, Fyshlas,

We are pleased to inform you that we have added a search feature for both the sticky panel and the mobile panel (regular and sticky).

For further details, please refer to the private content section.

Best Regards,
8Theme’s Team

Please contact administrator
for this information.

#390372 Copied

fyshlas

Participant

April 6, 2024 at 15:15

Thank you Tyler it looks great.

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#390373 Copied
Rose Tyler

Support staff

April 7, 2024 at 13:33
Hello, Fyshlas,

We hope this message finds you well.

We would like to inform you that we have recently implemented the following CSS code into the file located at:

– /wp-content/themes/the-nut-cracker-house/style.css

The code has been added within the @media (min-width: 500px) query as follows:
```
.fixed-header-area .fixed-header > .container {
display: flex;
align-items: center;
flex-wrap: nowrap;
justify-content: space-between;
flex-direction: row;
gap: 0px;
}

body .fixed-header-area .collapse {
display: block !important;
}

.fixed-header .container .blog-description {
margin-right: auto;
}

.fixed-header .container .navbar-header.navbar-right {
margin-left: auto;
}
```
Additionally, we have modified the positioning of blocks within the file:

– /wp-content/themes/the-nut-cracker-house/header.php

Specifically, the block collapse navbar-collapse has been moved from line 260 to line 288.

Best Regards,
8Theme’s Team
#390471 Copied
fyshlas

Participant

April 7, 2024 at 14:09

Thank you Rose, it looks good one small issue though i am trying to align the Sticky headers Shopping bag icon with the My Account icon (the shopping bag icon to be in the same line of the Cart text as in header-structure-2 by adding padding to it (padding-left) but it breaks the header-structure-2 styling of the Shopping bag. Im a trying to achieve the same stylign as the screenshot.

Files is visible for topic creator and
support staff only.

#390479 Copied

Rose Tyler

Support staff

April 7, 2024 at 15:32

Hello, Fyshlas,

Private Content

Best Regards,
8Theme’s Team

Please contact administrator
for this information.

#390500 Copied

fyshlas

Participant

April 7, 2024 at 16:08

Thank you very much this did the trick.

I have one more question if you are kind to help me. Im trying to use Header custom HTML (for 6, 7, 13, 14, 18 headers) which has a fixed postion on desktop/webview header.

I would like to use this also on the mobile header and sticky view next to the Main Menu (screenshot). What kind of code can i add to make this available? Also what can i use to hide the text and display only the icon on mobile header and sticky?

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#390508 Copied

fyshlas

Participant

April 8, 2024 at 09:40

Hello can i have an update on this please?

#390587 Copied
Rose Tyler

Support staff

April 8, 2024 at 17:50
Hello, Fyshlas,

In file /wp-content/themes/the-nut-cracker-house/style.css
added:
```
.mobile-custom-html a{
    position: absolute;
    left: 70px;
    font-size: 0;
    top: 0;
}
.mobile-custom-html i{
    font-size: 30px!important;
}
```
in /wp-content/themes/the-nut-cracker-house/header.php
added in 223 string:
```
<span class="mobile-custom-html">
                <?php echo etheme_get_option('header_custom_block'); ?>
              </span>
```
and /wp-content/themes/the-nut-cracker-house/headers/header-structure-2.php
added in 55 string:
```
<span class="mobile-custom-html">
              <?php echo etheme_get_option('header_custom_block'); ?>
            </span>
```
Best Regards,
8Theme’s Team
#390699 Copied
fyshlas

Participant

April 8, 2024 at 18:52

Thank you for all the help 5 stars for support

#390703 Copied

Andrew Mitchell

Support staff

April 8, 2024 at 18:59

Dear fyshlas,

We hope you’re reveling in the experience our theme brings! Your enthusiasm is what fuels our passion. Would you be so kind as to channel that energy into a 5-star rating on ThemeForest? Your feedback is the spark that lights our way!

Click here to spread the love: https://themeforest.net/downloads

Thank you for being an integral part of our journey!

Best Regards,
The 8Theme Team

#390706 Copied
Tagged: mobile header changes, website header customization, woocommerce mobile header, woocommerce templates, wordpress header modification, wordpress website modification, wordpress woocommerce help
Viewing 20 results - 1 through 20 (of 20 total)

The issue related to '‘Help on modifying website and mobile header’' has been successfully resolved, and the topic is now closed for further responses

Help on modifying website and mobile header

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection