• 0

Trying to recreate sticky navbar from 1.1.x in 2.0


Question

Posted · Report post

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

33 answers to this question

  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

Same as jmad said earlier, add the content width navi into the fixed area at the top, you will get the result you are looking for.

http://screencast.com/t/UnFqabwjo

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

Show us what you see then

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

Hi Danny, I was cheering when I read your post, but it doesn't remove the white in my situation. Have you tested this?

 

I've needed the following code (might not all be necesarry) to make it look like I wanted. And as said, my text and search icon where both white. I could of course be doing something wrong or it might be a bug, dunno:

.section-navbar.pl-area .navbar {
border: none;
}

body .pl-fixed-top {
background-color: rgba(255,255,255,0);
box-shadow: none;
}  

div.navbar-content-pad.fix {
height: 38px;
padding: 10px;
background-color: white;
}
  
.section-navbar .navbar .navline > li.current-menu-item > a {
background-color: rgba(0,0,0,0.05);
color: #111;
text-decoration: none;
}

.section-navbar .navbar .navline > li > a {
color: #111 !important;
text-decoration: none;
}

.section-navbar .navbar .navline > li > a:hover {
background-color: #e9e9e9;
color: rgba(0,0,0,0.05);
text-decoration: none;
}

.searchform .btn-search {
color: #adadad;
position: absolute;
z-index: 10;
left: 0px;
top: 0px;
}

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