Jump to content

Archived

This topic is now archived and is closed to further replies.

nfp1900

Getting additional images into the navi

Recommended Posts

nfp1900

Hi

 

What is the best way of getting an additional logo and perhaps something like a phone number into the fixed navi above the header? I like the idea that it's permanently on the screen in both desktop and mobile view. 

 

I've used hooker in the past to pull things in but I wanted to know what your opinion was on styling this - or what others have tackled. 

 

Thanks

Share this post


Link to post
Share on other sites
Danny

HI,

 

The method of adding additional content to a section is either:

 

1. Using hooks

2. Creating a child of the section and customizing the sections section.php file so that it includes this content.

 

The choice is entirely up to you, but I would probably go with the hooks as it is the simplest of the two.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900

Thanks I put a DIV into the hook and then styled it with CSS. It does add some rogue padding which I was finally able to track down and adjust but it does the job fine. 

Share this post


Link to post
Share on other sites
Danny

Awesome Sauce and thanks for informing us the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900

Hi

 

I used this CSS to adjust the DIV, I think there must be a better way of getting the hook to align within the container and not default to either the extreme left or right. This sort of works but doesn't flow too well when resizing windows.

 

This is my test site: http://testserver.nicholaspealldesign.com/and it's the phone number/email top right that I added via the hooks plugin. 

 

div#navihook {
  font-size:13px;
text-align: right;
position:relative;
  right: 95px;
}
 
div#navihook p {margin-top:10px;
margin-bottom:0px;}
 

Share this post


Link to post
Share on other sites
Danny

What you're going to need to do is use media queries to either resize the text or re-position each of them so they appear underneath one another.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900

Stacking these links would push the menu too far down making the fixed navi too tall. What's the easiest way to stop this showing in mobile view? I can add this content via a custom menu. 

Share this post


Link to post
Share on other sites
Danny

Add a remove-on-mobile class to your div which contains navhooks and then add the following CSS:

 

@media screen and (max-width: 568px) {
  .remove-on-mobiles {
    display: none !important;
  }
}
 
So your div looks like this:
 
<div id="navihook remove-on-mobiles">
 
That should do the trick.
 

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900

when I adjusted the DIV to include  both "navihook remove-on-mobiles" it was knocking out the CSS for the navihook div. The code didn't make any difference under mobile view. This is what I currently have, maybe something isn't quite right:

 

div#navihook {

  font-size:13px;
text-align: right;
position:relative;
  right: 140px;
}
 
 
div#navihook p {margin-top:10px;
margin-bottom:0px;}

 

 

Share this post


Link to post
Share on other sites
Danny

I used the code before I posted, it most definitely works. Here is what I have:

 

Functions.php - https://cloudup.com/cOOvN1KOmzw

Style.css - https://cloudup.com/cVpdoG82khT

 

As you can probably see, I choose to replace the use of ID with a class, as I you shouldn't use ID's really. I also, wasn't sure what hook location you used, so I just took a guess and used the pagelines_before_page hook location.

 

However, the code most certainly works, which you can see from the my video below.

 

http://quick.as/v632snv3

 

Therefore, the only outcome is that you either never have added the remove-blah-blah class to your HTML or CSS correctly or your use of IDs was having a negative effect (don't use ID's unless it's for something unique or specific.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900

Thanks for this,  I was away for a few days hence the delayed reply. Let me clean this up and take a look. Is it ok to use the hooker plugin or would you always suggest that I add the function to the child theme as you illustrated? 

Share this post


Link to post
Share on other sites
Danny

I prefer to always add my hooks to a child themes functions.php file, as I can remove them easily if anything goes wrong, the same goes for CSS/LESS. However, you can use the Hooker if you're more comfortable using that.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900

Ok I corrected the hook code as your example and added it as a class. I used the pagelines_before_navi. It's working ok now and the url etc are hidden when  reducing the screen size so thanks for helping out with that. 

 

On some pages I have a secondary navi in the page template http://testserver.nicholaspealldesign.com/venue/. If I select the 'hide this section for mobile users' it still appears as a menu with mobile view:  http://screencast.com/t/134dkLj0iRc Although this links to the main mobile menu it's not ideal to have both visible. Could you check on this please. 

 

 

Share this post


Link to post
Share on other sites
Danny

Try adding the following:

 

@media screen and (max-width: 568px) {
  #navbaru1193rx .nav-btn {
    display: none !important;
  }
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900

Where this appears on different pages it has different id's so I would need to add this over and over again - is it a bug that the checkbox doesn't have any effect?

Share this post


Link to post
Share on other sites
Danny

I am not entirely sure, as its a mobile menu button, so my initial thought is that it isn't a bug.

 

In regards to adding this on all pages, best thing to do is to replace the ID with your own custom class and then add it to the section itself via the style classes field, similar to what you did above.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900

Actually my mistake. Trying this from a mobile does in fact hide the section when the box is checked. 

Share this post


Link to post
Share on other sites
Danny

Ah yeah, if it is the hide on mobile, you can't check this on your browser by simply resizing the browser, as the user agent isn't mobile. You can however, use Chromes dev tools and the options to switch the user agent to test it.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • decmech
      By decmech+
      Hey Guys,
      Having some issues with the dropdowns for the Navi in DMS. For some reason I can't have any more than 2 levels in the dropdown. The cursor is hovering over RPAS Training (and the arrow to indicate more is visible) but no matter what browsers, it never shows up. Also inspecting the HTML shows that the additional fields are not there.
      I have inspected the PHP and cannot see anything that is limiting the number of levels. Any assistance to get the additional levels showing would be great.

    • jeomiland
      By jeomiland+
      Hi guys. Just now trying out Platform 5. I like the reletive simplcity of the new interface but there are things I'm used to in DMS that I'm not seeing yet in 5. Is there a good manual, documentation, video series about some of the basics?
      In particular, I've got a simple navigation menu, created the standard way in WP menus section with several top level parents, then 3-4 children menu items below a couple parent items. Have them moved to the right to create the standard parent-child relationship but all I see on the page is the parent level items - no dropdown!. So I changed themes from Platform5 to the standard 2015 default theme and now I see absolutely no menu at top, except for the mobile (hamburger?) icon.
      In DMS, one had Navi and Navbar, etc sections and each would work differently and give different results. How do you work the menu system in 5? And how get different results ?
      thanks
    • Kedark
      By Kedark+
      Hi,
      how to set the menu navi:
      - The background color when you expand a submenu,
      - Background color on mouseover,
      - The color of the text,
      - Width of submenu
      Please help, nowhere in the forum I have not found the answers to these questions ..
      Regards
      RKA
       
    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • triggerfish
      By triggerfish+
       I have setup the Navi (content width) to show the burger icon for my menu system (desk and mobile).
      It works great..displays only the Burger..BUT ONLY when on the Default Menu (which is not a real menu, but some random selection of pages).
      As soon as I select the MAIN Menu in the Navi settings it suddenly displays all of the menu items...which I don't want.
      The domain is not pointed yet..it is at 162.219.161.131
      If you know how to trick your computer the website is here... http://phw-homes.com/home-dms-2


×