Jump to content

Archived

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

janpeeters

Trying to recreate sticky navbar from 1.1.x in 2.0

Recommended Posts

janpeeters+    31
janpeeters

Hi,

 

DMS 2.0 looks great. Thanks. A few visual changes to my site that I'd hoped wouldn't have occurred, but with such an overhaul it wasn't completely unexpected.

 

Few problems I'm running into with the new sticky navbar.

 

I want my navbar to look like this again:

https://app.box.com/s/b553oabazx9acabv2l65

- Ending at the sides of the content wrapper and not the sides of the browser window.

- and the background image again running fully to the top.

 

The situation in 2.0 looks like this:

www.janpeeters.nl

 

How can I achieve this?

 

Second:

When I remove the DMS2 logo from the navbar I'd expect that my site-title would show up again like in 1.1.8, but that space stays empty. I've tried various things in settings but couldn't reproduce it. Is this not ported yet from 1.1.8 or am I doing something wrong?

 

I've researched both 'issues' with Chrome devtools but couldn't find a solution myself.

FYI I have no experience with hooks. 

 

Thanks for helping out,

Jan

 

Share this post


Link to post
Share on other sites
jmad+    80
jmad

Looks like your menu is Navi (Full Width).  Try using Navi (Content Width); a section in your components.  

 

On the logo issue, you probably need to upload your logo to the Navi section.

 

Hope that helps.

 

Jason

  • Like 1

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

Hi Jason,

 

thanks for your fast reply.

I wasn't aware of that new section but I don't now how to get it to behave sticky like the fixed one. Do you know of a way?

And how do you deactivate the fixed section? I can only find an edit button.

 

Regarding the logo. I don't want it to be an image, I want it to be text like in the previous DMS 1.1.8. When you removed the image in that version it showed the title of your site in plain text. Maybe this feature as not yet reached 2.0 but if not I hope it will be soon.

 

Thanks, Jan

Share this post


Link to post
Share on other sites
Simon    247
Simon

Regarding the logo. I don't want it to be an image, I want it to be text like in the previous DMS 1.1.8. When you removed the image in that version it showed the title of your site in plain text. Maybe this feature as not yet reached 2.0 but if not I hope it will be soon.

 

The text only header is not an option with 'navi' section. It was removed because during development we noticed most people either wanted a logo with title/alt for seo or nothing at all. When people removed the image in 1.1.x the next thing they did was contact support for css to remove the site title. So we thought this was the best trade off.

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

Thanks for explaining Simon, so... wehhhhh... Do you know of a way to add it back with a hook. I know you're quite experienced with hooks ;-)

 

Oh and I'm very curious how I can get a sticky navbar that ends at the sides of my content as mentioned above.

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

Hi Simon, but strangely enough I can't add anything into the fixed section nor remove the full width navi from it. My edit button doesn't move out like in the previous version. I only see the pencil.

Share this post


Link to post
Share on other sites
Simon    247
Simon

Show us what you see then

Share this post


Link to post
Share on other sites
James B    436
James B

Hi Jan, if you hover over the pencil icon the rest of the options will pop out. The x on the end will delete the section but leave the container. http://screencast.com/t/anIh0Nizz8n


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
janpeeters+    31
janpeeters

Hi James ,

 

Weirdly enough mine doesn't pop out. It took a while before I figured it out what is the case I hope you can reproduce it.

I've deactivated my Chrome extensions, custom CSS/LESS and Wordpress extensions.

With no luck of getting it to pop out.

 

I then changed my website from pixel-width 'boxed' to 'full-width' and it started popping out. I could delete the section and drag in the normal navi but after putting my site back to boxed the pop out stopped functioning.

So this might be a bug with the boxed option, can you confirm it doesn't work with you too?

 

For now I could live with that but some more things don't work too well even with the non-full navi.

 

It still functions as 'full width' in the 'fixed' area instead of aligning with the content 'box'. Maybe this is overseen in development that if you use the fixed area with a boxed site it should preferable align or give you an option to align it to the sides of the 'box'.

 

I could of course diminish the width of the navi-section with the column-width and inset tool (like I've done now) but that would not be my choice for various reasons. One being that it never aligns right if the columns don't have the same width as in the content-'box'.

 

I also would like to have my background run to the top of the page and not being blocked by the fixed section. See image I posted in my first post.

 

Thanks, Jan

Share this post


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

Yeah the Box mode tool options panel appears to be bugged, nice catch. I have reported this for you to our tracker.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

Hi Danny,

 

thanks for reporting it.

 

It would be great if you could also discuss functionality of the boxed fixed navi with the devs. I'd love to get back the way my site looked and functioned with 1.1.8 ánd experience the benefits of DMS 2.

 

If you can think of some CSS code I could use to achieve this right now that would be great.

 

Thanks, Jan

Share this post


Link to post
Share on other sites
jamesbridges74    0
jamesbridges74

I am having the same issue and want to recreate the hover state from 1.1 in the NavBar. It used to underline with base link colour now it doesn't. Can this still be done?

Share this post


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

Not sure what you mean, as the Navi section wasn't available in DMS prior to 2.0, so all you will want to do is replace Navi with Fixed NavBar.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

Hi Danny,

 

Technically you're right, but with 1.1.x there was a fixed navbar option with branding (site-title/logo). I'm trying to recreate that. The fixed navbar doesn't do that. Navi gets most close. I get that things change with an upgrade but functionality that get's removed and is not replaced with a similar simple option is a bit bothersome I must say.

 

When someone asked on the blog:

I hope that those of us using DMS will be able to just update to DMS 2 and not have to do entire site redesigns again like we did from Framework to DMS?

Andrew answered:

ya we've spent extra time on that this time. Learning from the past.

 

The problems I experience now with the navi are of course no entire redesign but it counts for me as quite a challenge. It costs me time to repair, reconstruct.

 

So I hope you can think with me on how to find a fitting solution.

 

Your help is really appreciated.

 

Jan

 

ps: I should add that it was easy with the old fixed navbar to make the sides from content box to sides of browser window transparant. Because that might otherwise cause some confusion since with the old fixed nav the sides were not transparant.

 

ps2: I've tried to use the NavBar and a text box for the branding but when it's in the header section it doesn't stick, when it's in the fixed section it doesn't adept to the width of my boxed content. Still positive we'll find a solution, a lot is possible with code, I'm just not extremely experienced with it. 

Share this post


Link to post
Share on other sites
sheilahoff+    63
sheilahoff

Interesting thread. I too have found that navi with box bug. But when I remove box I do NOT get the option back to remove it. :-(

 

And interesting that the team made a decision to reverse what was the default (to have text when no logo) so you'd have less tech support questions. Why not enable both options? Seems like now you're simply having the reverse, with some of us wanting to know how to add the text back in. My own business site uses site title text in the nav bar via CrackBar. I haven't tried the upgrade on it yet.

 

I have about 7 sites I will be upgrading so I started on a dev server as a playground. I won't move forward until this navi bug is squashed. But I'm with the folks that don't want to have to spend a lot of time making over elements of multiple sites for clients that will not pay for such unseen work. I suppose I could just leave the old sites in the old version as they're already in the wild. Not sure what issues that might raise in the future though. What's best practice on that?

 

Hmmm....later....I just setup another staging and updated to DMS2. All my sites are boxed. This time when I changed it to full width I was able to remove the menu. HOWEVER, when I returned it to boxed, it came back! And it's still broken. Bummer.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Ryan Logan+    0
Ryan Logan

I too, wish I could get my pre-2.0 menu back the way it was...with the color-underlined menu items.  I'm now having to recreate menus and struggling (time, knowledge, etc.)

 

Jan:  Would you mind sharing your Custom CSS for changing the color of the Search Magnifying glass (active)?

 

PL:  In IE (not Chrome or FF) I'm seeing a nasty "X" when entering text into the search field.  See screenshot.  Any way to eliminate this?  I like that Chrome and FF does not show this.  It's way to big, drawing way too much attention.

 

https://app.box.com/s/ge1bzcycbegxggj93fsy

 

Thank you.

Ryan

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

Hi Ryan ( rlogan ),

 

I've discovered that you can get the underlined navbar back by removing he 'navi' section and dragging the 'navbar' section into the fixed area. At first you might see a black navbar but if you publish/refresh the page it might be as you were used too. You can add a logo to it too, but it doesn't provide you with a site name in plain text like the previous fixed navbar did.

 

I don't know if you're using a full width or boxed layout for your site, because boxed together with a fixed navigation works quite flawed in DMS2 to my opinion. The navigation and logo go beyond the sides of the boxed content... not pretty. I think this was more consistent in v1.1.x. Where you could activate the fixed navbar in Settings.

 

Danny"], @[member="James B: Any news on if this will be fixed? or if any of you could provide me with some custom code to achieve this. I think it would be much better if the fixed section would work within the boxed area so that logo and navbar align to the inner sides of the box. Than the difference between a 'full' and a regular navbar would make more sense for me in the fixed section, like it does in header.

I guess in version 1 it consisted of something like a full width DIV with inside it a DIV that aligned with the boxed content. You could then make the full width DIV transparant to have the whole site including the fixed navbar boxed.

 

Regarding the coloured spyglass. I think that this CSS code should do it but you need to change the colour to your liking. Add it to your child theme's CSS or custom CSS. Note that this influences all your links. Something I wanted but not sure you want that too.

a:link, a:active, a:hover, a:visited {color: #8d0089;}

If it doesn't work let me know and I'll look further.

 

Best, Jan

  • Like 1

Share this post


Link to post
Share on other sites
Ryan Logan+    0
Ryan Logan

@Jan -  I removed the Navi and added NavBar.  The NavBar showed Black as you suggested (as I would expect), but unfortunately does not change upon refresh (also as I would expect).  Tried your Custom CSS but that doesn't change the color of the magnifying glass.  It does however, change the color of other items...in a bad way.  Appreciate your help though.  

 

I'm using the default layout settings.

 

As it stands now, I would be content to just get the magnifying glass color changed (when active) and the big "X" removed from IE, when entering search terms.  I'm wasting too much time fiddling with all the DMS weirdness.

 

accuritpresence.com

Share this post


Link to post
Share on other sites
Ryan Logan+    0
Ryan Logan

OMG.  I was able to get my color-underlined menu items...even using Navi.  Here is my CSS.

 

.section-navi .pl-nav > li.current-menu-item > a, .section-navi .pl-nav > li:hover > a {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.00);
  box-shadow: 0 -4px 0 #78C043 inset;
}
 
I'm on a roll.  Here is the CSS to change the color of the magnifying glass (changes active and inactive color state).  Would ultimately like to have it be #404040 (inactive) and #78C043 (active)
 
.icon, .fa {
    color: #78C043;
    display: inline-block;
    font-family: PageLinesFont;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}
 
The only issue left for me, from this thread is the big "X" in IE.

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

Hi Ryan,

 

I've tried it on my own site, I set the standard navbar to base colour and after publish I got the 'old' version with underlined links. No custom CSS needed here.

 

Regarding the coloured spyglass: The only other thing I can think of is changing the Link Base Color in settings.

 

Hope this helps, Jan

Share this post


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

Hi Danny,

 

Technically you're right, but with 1.1.x there was a fixed navbar option with branding (site-title/logo). I'm trying to recreate that. The fixed navbar doesn't do that. Navi gets most close. I get that things change with an upgrade but functionality that get's removed and is not replaced with a similar simple option is a bit bothersome I must say.

 

When someone asked on the blog:

I hope that those of us using DMS will be able to just update to DMS 2 and not have to do entire site redesigns again like we did from Framework to DMS?

Andrew answered:

ya we've spent extra time on that this time. Learning from the past.

 

The problems I experience now with the navi are of course no entire redesign but it counts for me as quite a challenge. It costs me time to repair, reconstruct.

 

So I hope you can think with me on how to find a fitting solution.

 

Your help is really appreciated.

 

Jan

 

ps: I should add that it was easy with the old fixed navbar to make the sides from content box to sides of browser window transparant. Because that might otherwise cause some confusion since with the old fixed nav the sides were not transparant.

 

ps2: I've tried to use the NavBar and a text box for the branding but when it's in the header section it doesn't stick, when it's in the fixed section it doesn't adept to the width of my boxed content. Still positive we'll find a solution, a lot is possible with code, I'm just not extremely experienced with it. 

 

The Fixed NavBar is still available, I am not sure what you mean. Simply replace the Navi section with the NavBar Full, its exactly the same thing, except that instead of it being added via the NavBar option, the Fixed Navbar is now a section called NavBar Full.

 

http://cl.ly/image/0G2x3K072j1f


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

Hi Danny, thanks for your last reply. The added 'full' to navbar made the difference. I couldn't imagine that a full section would align to content width, that seemed a bit weird. But after adding the navbar full into the fixed area I got it a lot more to my liking.

 

Strangely enough all my text in my navbar was white on a white background. Could be a bug, i didn't find anything in my custom CSS that could make the text of the navbar white. And I had to add some code to make the sides transparent. But all is good now.

 

You might consider adding to the docs something like 'how to get the sticky navbar from 1.1.x in DMS 2'.

 

Thanks,

Jan

Share this post


Link to post
Share on other sites

  • Similar Content

    • Jarek
      By Jarek+
      How to make the Impulse menu sticky?
      Here is a site that seems like it is doing just that: http://www.manhattanperiodontist.com/
      Here is the site I am working on: http://boeriu.digitalvector.com/ 
      I have no problem showing the menu at the bottom, but when scrolling up it does not stick.  I tried to add Nav Pro menu but when I do that, it just shows on top and no matter what I try is not working as I want it to.
      Any suggestions?
    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.


    • PierreFF
      By PierreFF+
      Hello, 
      I have an issue with NavPro on mobile when the link of the menue is on the same page. 
      Here is my website: http://foundersofthefuture.co
      The isssue comes from the fact that in my menue most of the items send somewhere else on the same page using anchor link (eg. #container_u788888). 
      This works well on desktop but on mobile, nothing happens when clicking on the link. One of the link of the menue of the homepage "France" sends to another page of the website and this one works well even on mobile. 
      I am using the Pagelines framework theme and also used a wordpress plugin (jQuery Smooth Scroll) for smooth scrolling . 
      Thanks in advance for your help and let me know if I need to provide more information. 
      Best,
      Pierre
    • tristanrodgers
      By tristanrodgers+
      Hi there!
      I'd love to have some social media buttons in my navbar like my online-shop has!
      http://mc1r-magazine.com/
      Can someone explain me how to create them? I tried a lot but don't know how to realize them...
      Greetings from Germany,
      Tristan
    • 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
×