Jump to content
Sign in to follow this  
jotaro

iBlogPro 6 iHeader Navigation Home icon customize

Recommended Posts

jotaro    0
jotaro

How can I put customized Home icon for iHeader Navigation?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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 { ... }

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jotaro    0
jotaro

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

 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jotaro    0
jotaro

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

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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 }

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jotaro    0
jotaro

/* 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
Danny    1,327
Danny

Try this:

 

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

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jotaro    0
jotaro

I tried it but the default  icon is still there.

 

pageline_forum1.jpg

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jotaro    0
jotaro

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
Danny    1,327
Danny

You can send me a private message.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jotaro    0
jotaro

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 (see edit history)

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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;
}
  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jotaro    0
jotaro

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
Danny    1,327
Danny

What do you mean ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jotaro    0
jotaro

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

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  

  • Similar Content

    • bnapoli
      By bnapoli+
      http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks
    • reklov79
      By reklov79+
      Hi,
      Meganav seems to have a bug if you upload a Logo with a higher resolution (which actually is useful as it looks then sharper on mobile phones). But on mobile the Logo is then larger than on a desktop. Problem is the following code in the meganav style.css. Simply the "height: auto !important" needs to be removed.
      @media (max-width: 480px) { style.css?ver=5.0.14:133 body .meganav-logo img{ height: auto !important; } } But how to achieve that? What is the standard method for customizing that? Overriding via CSS / LESS doesn't work - in this case especially because of the !important derictive used in the original CSS I believe.
      Changing the original CSS is something I don't want to do as it leads into issues when upgrading.
      Btw: I seem not to be the only one with that issue - anyhow, the solution here (not displaying the Logo on mobile) is not acceptable for me.
      Thanks,
      Volker
       
    • nadielp
      By nadielp+
      Hi Everyone,
      I am trying to get a single navigation item to center. I am using a scroll menu in the navigation component of Impulse. I would like to have the item in the center of the page but it defaults right. I tried setting the item to center a few different ways and nothing is working. I added {
        display: inline-block;
        position: relative;
        text-align: center;
      }
      but that didn't work...any help would be appreciated. Site is at http://vetpaw.org/new
       
      Thanks!
      Daniel
    • yemoonyah
      By yemoonyah+
      I just installed and added the Flipper section to my home page and it makes my navigation/menu bar items disappear.
      They do show up again when scrolling down and everything seems normal on the other pages.
      http://yemoonyah.com
      Thanks.
       
    • Houston Haynes
      By Houston Haynes+
      I'm still "piercing the veil" of platform 5, with page navigation the current subject of interest. I worked with a few plugins (the most useful being Next Page Not Next Post) but I wanted to take a step back and start with an example - and see if I could get a bit of help "inside the beltway". 
      What I'm looking to do is substantially similar to the pagelines docs pages - see my annotated screenshots attached. At the top of a "child" page I want a link back to the "parent" page - and at the bottom of that "child" page I want to place a similar link to the "grandchild" page. At the bottom of each grandchild page I want there to be navigation "buttons" to sibling pages in the hierarchy. 
      "Next Page Not Next Post" handles what I'm expecting for "sibling" navigation, but I'm having a bit of trouble getting over the logistical hump of applying that functionality to my page "Template C" instance only. And per the attached examples, while researching how to solve this problem I see on the Pagelines site *itself* that the navigation elements are in place - and I especially like the oval button formatting of the sibling page navigation.
      So - really, my question is two-part:
      Are there plugins/code snippets/tutorials/threads here that show how Pagelines achieved their page hierarchy nagivation, and  Is there a tutorial (or advice from generous contributors here) on how to use the PHP templates to override the content portion of the page to add the navigation elements? Thanks in advance!


×