Jump to content


Photo
- - - - -

Nav and Brandnav customization


  • Please log in to reply
18 replies to this topic

#1 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 06 April 2012 - 09:08 AM

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.

#2 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 06 April 2012 - 09:34 AM

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... ;)

#3 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 06 April 2012 - 10:39 AM

Please Login or Register to see this Hidden Content

doesn't move the nav links.
The only code that moves link is something like this:

Please Login or Register to see this Hidden Content

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.

#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 15120 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 April 2012 - 10:41 AM

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

#5 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 06 April 2012 - 11:14 AM

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

#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15120 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 April 2012 - 11:17 AM

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.

#7 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 06 April 2012 - 11:20 AM

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..

#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 April 2012 - 12:21 PM

@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:

Please Login or Register to see this Hidden Content

Buona pasqua!

#9 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 06 April 2012 - 12:27 PM

that's the old htread...

Please Login or Register to see this Hidden Content


@gyoery
also this code seems to not move 'nav menu' items:

Please Login or Register to see this Hidden Content


@Danny
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.

#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 15120 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 April 2012 - 12:34 PM

@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.

#11 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 06 April 2012 - 12:49 PM

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

#12 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 06 April 2012 - 01:18 PM

@gyoery
arrrggh!! my bad! I'm sorry...
now this code will 'center' the nav menu...

Please Login or Register to see this Hidden Content

... but for some reason it makes this code as uneffective as the nav bar will display all the menu items again...

Please Login or Register to see this Hidden Content

please look the result at this url

Please Login or Register to see this Hidden Content



#13 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 06 April 2012 - 01:21 PM

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.

#14 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 06 April 2012 - 02:21 PM

@gyoery
this code will only display the 'current page' nav item (that's ok) but it cannot 'center'

Please Login or Register to see this Hidden Content


@rangelone
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:

Please Login or Register to see this Hidden Content


Off topic... congrats for your nice 'italian style' Easter wishing... and back to you of course! ;)

@Danny
Well... I don't want to hurt the kindest gyoery's and rangelone's 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...

Please Login or Register to see this Hidden Content


This is the current CSS code:

Please Login or Register to see this Hidden Content



#15 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 06 April 2012 - 02:49 PM

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)..

Please Login or Register to see this Hidden Content



#16 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 06 April 2012 - 03:09 PM

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...

#17 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 06 April 2012 - 03:13 PM

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

#18 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 06 April 2012 - 03:55 PM

@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:

Please Login or Register to see this Hidden Content

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 don't want the 'page title' in the content but in the header.
So by Danny's suggestion I activated 'highlight section' in the header.
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

Please Login or Register to see this Hidden Content


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 gyoery and all pro supporters!

#19 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 06 April 2012 - 04:02 PM

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.


You are correct here. It would be time-consuming to create this CSS.