Jump to content

Archived

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

brookdalecenter

NavBar in heading not showing landing pages

Recommended Posts

brookdalecenter

Hi,

 

My navbar in my heading section is not showing the landing pages of my menu. I have already asked about this last week but not one single person answered me. I'm beginning to get frustrated here. All I want to do is be able to click on my menu and have it lead me to the landing page. I guess for this I would need to the menu to show dropdowns when I hover over it first. Please help.

 

Thanks,

Jose

Share this post


Link to post
Share on other sites
greenfly

Hello @brookdalecenter 

 

Could we have a link to your site please? 

 

You have created the topic last week and no one replied? could you link us to this topic and we will see why? I am looking at your created topics and i cannot see this already posted http://forum.pagelines.com/user/63667-brookdalecenter/


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
brookdalecenter

Hello. Sure. My site is called www.brookdale.org. If you go on the navbar menu and try to click onthe "professional development tab" the drop down will show up and reveal the other pages. There's no way of going to the professional development dropdown page. I think I wrote within another thread last week or maybe I wrote it in the wrong section. I'm not sure.

Share this post


Link to post
Share on other sites
greenfly

Ah, in terms of navbar - this is mobile friendly so the top level of any nav bar item when using this section is not clickable. If it were clickable you wouldn't be able to use this on mobile devices as clicking wouldn't activate the drop down and would in fact redirect the browsers. 

 

You could use a different section or add the intended top level page to the drop down items.. You can also use different navbar section for browsers and add in this nav bar for use in just mobile device browsers.

 

​This is widely documented as the way that the nav bar works on the forum. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
brookdalecenter

This makes a lot of sense. Thanks for that. How would I go about using different navbar sections for browser and mobile? 

Share this post


Link to post
Share on other sites
greenfly

You can use media queries to have different content appear on different devices or at different resolutions. 

 

You can read more about media queries here http://www.w3schools.com/css/css_mediatypes.asp


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
brookdalecenter

Ok, I understand in theory how to do it but I'm confused when it comes to sections on Pagelines.

 

If for example I wanted to show the navbar on handhelp but not on mobile devices would something like this make sense: 

 

@media screen .section-navbar .pl-section-pad .navbar-content-pad {
background-color: #787878;
  display: none;
}
 
@media handheld .section-simplenav .pl-section-pad .simplenav-content-pad {
background-color: #787878;
  display: inline-block;
}
 
Please let me know if my logic makes sense here.
 
Thanks for your help

Share this post


Link to post
Share on other sites
greenfly

The code should not be the way you have it. 

 

More like below 

@media device {
  {
  .Section {customCode}
  }
}

rather than the way you have it.. 

 

​or to handle different resolutions rather than targeting specific devices by their classes, use the code as below 

@media only screen and (max-device-width: 480px) {

.Section 
 {         
   width: 400px;
        }
}

This example is used to apply custom css to a device with a max-width of 480px. 

 

Best thing i can suggest is read about this on the link i provided and it will explain how to handle this. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
brookdalecenter

Awesome. Thank you very much! and lastly, to show or hide an object, I would use the display property correct?

Share this post


Link to post
Share on other sites
greenfly

Display:none; to hide items via CSS yep 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
brookdalecenter

Your help has been greatly appreciated my friend!

Share this post


Link to post
Share on other sites
greenfly

No problem - any time :) 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
brookdalecenter

Hi Martin,

 

I used this code in my custom code section but it is not working:

 

@media screen  {
  .section-navbar .pl-section-pad .navbar-content-pad {
background-color: #787878;
  visibility: visible;
  }
}
 
@media handheld  {
  .section-navbar .pl-section-pad .navbar-content-pad {
background-color: #787878;
  visibility: hidden;
  }
}

 

I still see the navbar on handheld devices. Please let me know where I went wrong here.

 

Thanks,

Jose

Share this post


Link to post
Share on other sites
greenfly

@brookdalecenter 

 

The code you have above is not correct. 


@media screen  {
  .section-navbar .pl-section-pad .navbar-content-pad {
background-color: #787878;
  visibility: visible;
  }
}

won't do anything as your telling the site to affect anything viewing the site via a screen (everything) 

 

change it to 

@media screen and handheld  {
  .section-navbar .pl-section-pad .navbar-content-pad {
background-color: #787878;
  visibility: hidden;
  }
}

and see if that works. Telling the site to apply CSS to anything that is viewing the site via a screen and is a handheld. 

 

i recommend reading around this subject via google to get a better understanding of how this works. 

 

This is not something created by PageLines and we are limited as to how much we can support this. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
brookdalecenter

Hi martin,

 

Thanks for the quick reply. What i'm trying to do is show the navigation bar on screen but not display it on handheld devices. Wouldn't the code that you provided me hide the navigation bar for both screen and handheld devices?

Share this post


Link to post
Share on other sites
greenfly

Sorry the code was wrong anyway 

 

Try what you had initially and instead of visibility: hidden; Try display:none;


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
brookdalecenter

I tried that. It didn't work either. It created this black box that would take up some of the navbar. Very weird.

Share this post


Link to post
Share on other sites
James B

Hi there, your css is too specific, its going right into one of the elemtents inside the navbar and hiding it. To hide the entire navbar you only need to put the .section-navbar etc. The additional code you've added after ward tell the css to hide the nav content pad, which is inside the section pad inside the navbar. So the nav content pad gets hidden but the background and other containers remain in place. You also need to specify the size of the screen you want it to change on if targeting different sizes for mobile/ipad etc.

 

See this post which explains in more depth - http://forum.pagelines.com/topic/30582-how-to-override-media-queries-in-dms-pro/

 

@media (max-width: 767px)  {
  .section-navbar {

display:none;

  }
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
brookdalecenter

Ok thanks! One more question. Is there any way to add HTML to pageline sites? I would like to have more control over how my site works. I tried using a child theme but that changed the way my entire page looked, including the Pagelines DMS interface. Please let me know. Thanks.

Share this post


Link to post
Share on other sites
greenfly

Of course you can add HTML. Add it to a text box if you like. 

 

What is the HTML you are trying to add?


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
brookdalecenter

Oh... that changes everything. So we can give classes to items inside the HTML and use the custom code section to customize them?

Share this post


Link to post
Share on other sites
greenfly

yes of course. 

 

What is the HTml you are adding? 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
brookdalecenter

I wanted to create a newsletter entry form that I could customize. This helps a lot.

Share this post


Link to post
Share on other sites
greenfly

ok great to hear :) 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
brookdalecenter

One more thing. I am trying to customize one of the section areas of my page but I don't know what the class is for it. I tried a few things but none has worked for me. Can you help? Sorry i'm asking for this here and not in another thread!

Share this post


Link to post
Share on other sites

×