Jump to content


Photo
- - - - -

Another Navbar Issue

navbar code position reposition

  • Please log in to reply
7 replies to this topic

#1 gryphon

gryphon

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 25 March 2013 - 02:25 PM

I am currently using pagelines customize to try and reposition the menu part of the brandnav. I want the menu itself moved over and the font changed. I have tried using the #brandnav hook, but I think I'm doing it wrong as nothing changes. Can someone give me some code I can put into the pagelines customize style.css file that will allow me to do this? If not is there another way of doing this? I'm not great with code so please spell it out as best as you can. Thanks!

 

Also in the bottom section of my logo there is a light blue strip, what I really want is to position the menu so it overlaps that strip.

Here is what the menu used to look like, and what I'd like it to look like now:

 

Please Login or Register to see this Hidden Content

 (the top blue menu)



#2 catrina

catrina

    Advocate

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

Posted 25 March 2013 - 04:53 PM

#brandnav is the selector for the brand navigation that is on the top right corner. NavBar uses selector #navbar (so you must use this in your CSS).

 

To change the font, you’ll also need to use Custom CSS. To find the Custom CSS you need, you'll need to use Firebug (or Chrome Development tools). To learn how to use Firebug for CSS customizations, please review this entire documentation and follow the instructions:

Please Login or Register to see this Hidden Content

For help with the font-family attribute, please see these instructions:

Please Login or Register to see this Hidden Content



#3 gryphon

gryphon

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 25 March 2013 - 06:45 PM

#brandnav is the selector for the brand navigation that is on the top right corner. NavBar uses selector #navbar (so you must use this in your CSS).

 

To change the font, you’ll also need to use Custom CSS. To find the Custom CSS you need, you'll need to use Firebug (or Chrome Development tools). To learn how to use Firebug for CSS customizations, please review this entire documentation and follow the instructions:

Please Login or Register to see this Hidden Content

For help with the font-family attribute, please see these instructions:

Please Login or Register to see this Hidden Content

 

I do not know where to put the css...

 

Does anyone have a step by step of how to move a brandnav over?



#4 Rob

Rob

    One Smart Egg

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

Posted 25 March 2013 - 08:55 PM

Hi,

 

You can place the CSS in Dashboard > PageLines > Site Options > Custom Code.

 

When you say you want to 'move' the menu, could you possibly provide some greater detail of what you mean? Some screenshots, examples or drawings would be really helpful.

 

Thanks.  We'll do all we can to assist.



#5 gryphon

gryphon

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 25 March 2013 - 09:35 PM

This is the brandnav I have:

8590883410_8db6d88679.jpg

 

This is the brandnav I want:

8590883584_117fabe2da.jpg

 

How do I reposition it and change the font so that it is closer to the bottom one?



#6 Rob

Rob

    One Smart Egg

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

Posted 25 March 2013 - 10:38 PM

Okay, thanks for the images.

 

My best suggestion is to replace Brand Nav with Branding and Nav Classic.

 

We can more easily control Nav Classic to place it where you desire it using CSS.

 

The font is selected via Dashboard > PageLines > Site Options > Typography.   You can and probably should, implement our Google Fonts plugin via the Store. This would give you over 650 fonts to select from to match or at least come very close to the desired font.  Custom Code (CSS) can also be used to select a different font, if desired.  You can find more information about using font families here:

Please Login or Register to see this Hidden Content



#7 gryphon

gryphon

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 26 March 2013 - 05:25 AM

Okay, thanks for the images.

 

My best suggestion is to replace Brand Nav with Branding and Nav Classic.

 

We can more easily control Nav Classic to place it where you desire it using CSS.

 

The font is selected via Dashboard > PageLines > Site Options > Typography.   You can and probably should, implement our Google Fonts plugin via the Store. This would give you over 650 fonts to select from to match or at least come very close to the desired font.  Custom Code (CSS) can also be used to select a different font, if desired.  You can find more information about using font families here:

Please Login or Register to see this Hidden Content

 

Ok now I have this:

 

8591949456_6a5338b2fd.jpg

 

Now what code can I use to put the menu in the light blue section of the branding (overlapping)? If this isn't possible what code can I use to get rid of any space between the branding and the menu (one touching the other)?



#8 Danny

Danny

    Is Awesome!

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

Posted 26 March 2013 - 07:40 AM

Hi,

 

Unfortunately, something like isn't simple and would most likely require considerable CSS and possibly a hook.

 

Also, what you're currently trying to achieve by using a full header image and then reposition the Navigation, isn't the best method in my option. I think the best course of action (due to the amount of custom code this type of layout would require), would be for you to contact one of our Pros.

 

Please Login or Register to see this Hidden Content







Also tagged with one or more of these keywords: navbar, code, position, reposition