• 0
Sign in to follow this  
Followers 0

iBlogPro 6 iHeader Navigation Home icon customize


Question

Posted · Report post

How can I put customized Home icon for iHeader Navigation?

Share this post


Link to post
Share on other sites

31 answers to this question

  • 0

Posted · Report post

Try adding something like this (may require additional CSS):

 

#site .section-iheader .homebutton > li:hover {
  background-color: rgba(0, 0, 0, 0);
  background-image: inherit;
  background-repeat: no-repeat;
  background-position: center center;
}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

I apologise, but I am not entirely sure what section you're referring to when you say iHeader ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

This part.

 icon.jpg

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I apologise, for some reason I thought you were referring to the PinsPro theme and not iBlogPro, not sure why I assumed this. Anyway, to add your own icon/image you're going to need to use custom CSS:

 

/* This hides the icon */

.homebutton .icon-pagelines {
display: none;
}
/* Add your image CSS here */
.homebutton { ... }

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

where and which directory should I put my custom icon image?

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You can upload your image anywhere you link, as long as you use the correct path in your CSS. I would say it would be best to upload via the media library in your WordPress admin dashboard.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I did put custom CSS as you showed me, however nothing is happened.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The code I gave you will not add a custom image, it will only hide the icon, you need to add your custom CSS to display your custom image.

 

/* Add your image CSS here */
.homebutton { Add your image CSS here }

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

/* This hides the icon */

.homebutton .icon-pagelines {
display: none;
}
 
I put this to custom LESS/CSS box, however the home button and default icon does not hide.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Try this:

 

/* This hides the icon */
#site .homebutton .icon-pagelines {
display: none;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I tried it but the default  icon is still there.

 

pageline_forum1.jpg

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Can you provide a link to the site in question and make sure the code you have added is still active, so I can see this issue myself.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

the site is not open for public. you need user name and password. how can I provide them to you?

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You can send me a private message.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I sent it.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I have changed the code slightly and it appears to be working now.

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Thanks. Then, I should put my custom icon as you told me earlier?
 

 

One more thing, I'd like to align the width of both slider image and navigation menu bar.

 

The slider image width is 1100 px and navigation menu bar is 1068 px now.

 

How could I do this?

 

pagelines_forum2.jpg

Edited by jotaro

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

To add your own image, you will need to inspect the element using Chromes dev tools and then find that menu items unique ID. When you do, you can use that ID to style that menu item only. From here, you can make it a different color to the rest or even add your own image.

 

To remove the space on either side of your header, you will want to remove the padding, you can do this by adding the following code:

 

#pl_areaua0476 .pl-content {
padding-left: 0;
padding-right: 0;
}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I got it! Thank you so much, Danny. 

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem and do you see in the code what I have done?

I have inspected the section which has a unique ID, all sections have a random ID which can be used to prefix your custom CSS to target that section. Then you just apply the other element classes to the CSS and then add your styling.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

One more thing, the icon disappear while the cursor hover on the button. how could I fix this?

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

What do you mean ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I mean while the cursor hover on my custom home button, the icon disappeared as follows,

 

1.jpg

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Can you reactivate the Danny account again, so I can take a closer look. Just tried using the credentials again and they no longer work.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Here is the link,

 

http://imgur.com/4xHfb59

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0