• 0
Sign in to follow this  
Followers 0

Nav and Brandnav customization

Question

Posted · Report post

Hello, I placed a Nav menu in the header below the Brandnav. The nav only displays one link per page in order to look like 'page title' and that's ok. I'd like to 'center' the postion of such link but where I customize it such style will apply to brandnav buttons as well (either nav or brandnav are the 'same' element "Main menu"). How to overcome such behaviour? Thanks.

Share this post


Link to post
Share on other sites

18 answers to this question

  • 0

Posted · Report post

try #nav #menu-nav {margin:0 auto;} also consider adding a #nav .content {width:100%;} to make it the width of the full page (like the bar on top) PS: Nice 2 see that you got it to work... ;)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

[code]#nav #menu-nav {margin:0 auto;} #nav .content {width:100%;}[/code] doesn't move the nav links. The only code that moves link is something like this: [code].main_nav ul { display: block; float: left; list-style: none outside none; margin-left: 400px; padding: 0; }[/code] But it moves the 'main menu' so either 'nav menu' or 'brandnav menu' items will move. I don't know how to style only the nav menu items, without affecting also the brandnav menu items.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, I don't quite understand what you're trying to do, you're using the Navigation section to create a Page title ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

just write #nav .main_nav ul {} that tells it to only take the .main_nav ul {} within the #nav section. But you should see to it that you use margin:0 auto; to center elements, not margin 400px; @danny exactly, similar to the Pagelines Showcase page

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If you want to have something similar to the Showcase, you could use the Highlight section minus adding an image, then use CSS to style.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

we had that conversation b4.. He want's it to be in the header section, where you cannot select different contents for the boxes or highlights. Can't find the thread now..

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@oineague1960, Buon giorno! If I understand this, you just want to center the menu below your branding and brandnav (the one with the white background). This is the CSS, which goes in Custom Code in the CSS Rules area: [code]#nav .content-pad, #secondnav .content-pad { margin-left: 350px; padding-bottom: 5px; padding-top: 5px; }[/code] Buona pasqua!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

that's the old htread... http://www.pagelines.com/forum/discussion/18865/entry-title#Item_25 @[b]gyoery[/b] also this code seems to not move 'nav menu' items: [code]#nav.main_nav ul { display: block; list-style: none outside none; margin: 0 auto; padding: 0; }[/code] @[b]Danny[/b] header section seems to not accept other elements than branding, brandnav, nav by default. I tried to customize 'page title' css but it seems not possible to give it the 'full width' background so to display exactly like the brandnav style as the title will take the 'content section' size. From such assumption the suggestion of gyoery di use 'nav menu' in the header with some css tweaks in order to display only the 'current page' link. Another option could be to use 'simple nav' or 'secondary nav' in header section but I don't know if it's possible or how to... my coding skills are really modest.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@oinegue1960, You don't need to add the Highlight section to your header template. Simply go to PageLines > Templates and select the template you're using for most of your pages and when you edit or create a page. Scroll down to the PageLines Meta settings and simply add the Page's title into the Highlight settings. Once you have done, reply here and we can help with your styling.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

you are missing a space!!! #nav.main_nav ul <-- wrong #nav .main_nav ul <-- right

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@gyoery arrrggh!! my bad! I'm sorry... now this code will 'center' the nav menu... [code]#nav .main_nav ul { display: block; list-style: none outside none; margin: 0 auto; padding: 0; }[/code] ... but for some reason it makes this code as uneffective as the nav bar will display all the menu items again... [code].page-id-78 #nav .page-item-130, .page-id-78 #nav .page-item-138, .page-id-78 #nav .page-item-97, .page-id-78 #nav .page-item-136, .page-id-78 #nav .page-item-134 {display:none;} /*menu-item-78 is showing*/[/code] please look the result at this url http://www.angeloborra.radiowebjay.com/blog/artisti/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

try changing the order... first you tell it to be centered, then you tell it to hide the rest. Or just remove the display:block from your code, since that cancels out the display:none you used to hide all your elements.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@[b]gyoery[/b] this code will only display the 'current page' nav item (that's ok) but it cannot 'center' [code]#nav .main_nav ul { list-style: none outside none; margin: 0 auto; padding: 0; }[/code] @[b]rangelone[/b] sorry for delayed reply but this thread page scrolling only highlighted the last 2 posts so I missed yours. Well... your code will move the menu item to the center... just need to workaround 'px'. I guess I could 'mashup' (sorry for my 'deejay' slang...;) yours and gyoery's code this way: [code]#nav .main_nav ul { list-style: none outside none; margin-left: 594px; padding: 0; } .page-id-78 #nav .page-item-130, .page-id-78 #nav .page-item-138, .page-id-78 #nav .page-item-97, .page-id-78 #nav .page-item-136, .page-id-78 #nav .page-item-134 {display:none;} /*menu-item-78 is showing*/ [/code] Off topic... congrats for your nice 'italian style' Easter wishing... and back to you of course! ;) @[b]Danny[/b] Well... I don't want to hurt the kindest [b]gyoery's[/b] and [b]rangelone's[/b] solutions at all as they are much appreciated... but I have to say your suggestion immediately goes straight to the target without much coding. (in my modest opinion that's sounds more 'coherent' to Pagelines 'concept' where it offers several 'ready to use' features to the user) It just need a little more styling as margins are not exactly the same size of brandnav (it's very next... but it doesn't reach the 'full width' size of brandnav) as you can see at this url... http://www.angeloborra.radiowebjay.com/blog/artisti/ This is the current CSS code: [code]#highlight .content-pad .highlight-area { background: #DDD; border-bottom: 1px solid #fff; box-shadow: inset 0 0 5px rgba(0,0,0,.9); line-height: 130%; color: rgba(0, 0, 0, .4); margin: 0 0; padding: 10px; } [/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

There is so much going on here that I'm not sure what you even need, but something to mention, you can target the nav and brandnav separate. .section-nav .main_nav is the nav and .section-brandnav .main_nav is the brandnav For the highlight, adjust this until you get it how you like it (the middle number for left/right).. [code].section-highlight .content-pad { padding: 15px 10px 10px; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok, now we are moving in circles... first you say you want it added to the header to make it full width. So we give you different solutions for that. Now u are saying that you want to have it in the content area, which is defined to your content width. You can make a highlight "float" (absolute positioning) and be full width, but that then won't give u the possibility for proper responsive design. Anyways, you should decide on your specs, and tell us which way you wanna go. You can also make your whole page full width, and then define a fixed or max-width for the content area manually...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I agree with @gyoery. What exactly are you trying to accomplish?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@Jenny Yes you're right... 'there's much meat on the fire' (as we use to say here in Italy)... so welcome on board! :) I run some test by firebug and your 'padding' code seems to not work on 'width' size of the highlight section. But your suggestion helped me to find the effective CSS item to workaround... the item to set results this: [code].entry-title, .content-pad{ padding: 0 0; }[/code] I'm not sure if it's the best way to get the 'full width' of highlight section as such code will affect all future 'entry-titles' as well, but it has the same brandnav bar size now. If it's not correct please tell me as I'll try to find another solution. @gyoery Maybe there's a little misunderstood as I [b]don't[/b] want the 'page title' in the content but in the header. So by Danny's suggestion I activated 'highlight section' in the[b] header[/b]. And I have to say it's responsive too. (at least here where I'm using FFox and Chrome to check the styling layout) Please look at this url http://www.angeloborra.radiowebjay.com/blog/artisti/ Of course I could use also your solution but if I'm not wrong it'd result a longer CSS styling task by to 'display:none' all items of each page. More in general sense your support along this and other threads is absolutely helpful to me either to solve the problem in object or to learn and to increase my knowledge on Pagelines best use. In my modest opinon such a 'knowledge teaching' is extremely important for the 'goal' of Pagelines forum's community. Thanks again [b]gyoery[/b] and all pro supporters!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

[quote]Of course I could use also your solution but if I'm not wrong it'd result a longer CSS styling task by to 'display:none' all items of each page.[/quote] You are correct here. It would be time-consuming to create this CSS.

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