Jump to content
Sign in to follow this  
oinegue1960

Nav and Brandnav customization

Recommended Posts

oinegue1960    0
oinegue1960

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
gyoery    2
gyoery
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
oinegue1960    0
oinegue1960
[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
Danny    1,327
Danny
Hi, I don't quite understand what you're trying to do, you're using the Navigation section to create a Page title ?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gyoery    2
gyoery
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
Danny    1,327
Danny
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.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gyoery    2
gyoery
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
Rob    547
Rob
@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!

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
oinegue1960    0
oinegue1960
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
Danny    1,327
Danny
@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.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gyoery    2
gyoery
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
oinegue1960    0
oinegue1960
@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
gyoery    2
gyoery
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
oinegue1960    0
oinegue1960
@[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
Jenny    33
Jenny
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]

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
gyoery    2
gyoery
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
oinegue1960    0
oinegue1960
@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
catrina    103
catrina
[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.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

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  

×