Changing menu items

Hi, I’ll ask several questions at once to save you some time:

1. I want to add to the header an icon to “my account”. So far I’ve been unable, any way to do it?
2. I would like the menu in the sticky menu to be completely centered. So far it’s not. It’s the same with the search bar, they are like moving blocks. Is it possible to left the sizes fixed or at least in %, to have the menu and search bar completely centered?

Thanks!

Hi,

1. Please, provide us your website link so we can prepare a custom snippet for you to achieve this.

2. Need to see your website also.

Regards

Hi,
I also want an icon in the my account section.
Can you also look for me how i can do it?
Thanks!

Try to add the following code snippet to the Custom CSS area in Theme Settings to add my account icon.

.header-links {
  position: relative;
}

.header-links:before {
  position: absolute;
  top: 0;
  left: -25px;
  content: "\e005";
  font-family: Simple-Line-Icons;
  color: white;
}

Regards

Thanks a lot!!
Is it also possible on the mobile menu ?

Please, add the following code snippet to the Custom CSS area.

.mobile-nav .header-links li:last-child > a:before {
  content: "\e005";
  font-family: Simple-Line-Icons;
  font-size: 13px;
  margin-right: 8px;
}

Regards

Thanks.
My site currently is in development (in local) but we have a pre-version online.

I’ve seen both answers to someone who also asked this. You add the icon but where can I add the link?

Regarding question number 2, it still happens.

Thanks

Hi,

Try to add this code snippet to the functions.php file in the child theme

add_filter( 'basel_header_configuration', 'basel_custom_header_configuration', 1, 1 );

function basel_custom_header_configuration() {

		return array(
			'container' => array(
				'wrapp-header' => array(
					'logo',
					'widget_area',
					'right-column' => array(
						'header_links',
						'search',
						'wishlist',
						'cart',
						'mobile_icon',
					)
				)
			),
			'navigation-wrap' => array(
				'container' => array(
					'main_nav'
				)
			)
		);
}

2. Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

.sticky-header .right-column {
	width:20%;
}

Regards

Thanks for the answer. Its still not working.

what I want to achieve is:
– on Mobile menu (but not big menu, I mean top menu) add an icon (fa-user) that takes to my account
– the same on desktop menu
– the same on fixed menu

I’m sending screenshots of how I saw this right now.

Attachments:

You must be logged in to view attached files.

Hi,

Sorry, but we can’t put my account link in the mobile header. And we don’t see that you have added the code we gave you to show it for desktop.

Sorry, that site still hasn’t been updated to the last version.
We are developing in local until everything’s OK to take the site to production.

I’m OK with no mobile, but for desktop can I add only an icon and not full text?
As I sent you in the screenshots, there’s only text.

Thanks!

I also thought of something else. Is it possible to change the order of the mobile menu items?
It’s a bit odd to have the burger icon (for mobile menu) on the right.
Is it possible to put it to the left of the logo, and have the search icon to the right?

So the order would be
Left
1. Burger (menu)
2. Logo

Right:
1. Wishlist
2. Search

That would be aweomse. Thanks!!

Hi,

We will need to see your website live with the code we gave previously. Then we will try to change it to make my account link with the icon only.

Sorry, but we can’t change the mobile header layout with CSS.

Regards

OK, here’s my site live: http://sensacional-store-prod.us-west-2.elasticbeanstalk.com
Thanks

Here’s my live site: http://sensacional-store-prod.us-west-2.elasticbeanstalk.com
Thanks

Hi,

But did you use the code from our replies above?
https://xtemos.com/forums/topic/changing-menu-items/#post-28012

and https://xtemos.com/forums/topic/changing-menu-items/#post-26353

OK, I understood what your code made, but unfortunately it’s not what I’m looking for.

I’ve attached a picture that compares now vs what I want.

Let me know if that’s possible. It’s only for desktop (or non-mobile).

This is NOT uploaded to my live site, so you won’t see the changes, but they indeed are added.

Thanks

Attachments:

You must be logged in to view attached files.

Hi,

Your website seems to be not working at the moment and we can’t see it.

Regards

You can use this CSS code to change the text with an icon

body .right-column .header-links li a {
	font-size: 0;
  font-style: initial;
	text-align: center;
}

body .right-column .header-links li a:before {
	content: "\e005";
	font-family: Simple-Line-Icons;
	display: inline-block;
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 30px;
}

body .right-column .header-links li a:after {
	display: none;
}

[Author]

Posts