Jump to content
Sign in to follow this  
gryphon

Another Navbar Issue

Recommended Posts

gryphon    0
gryphon

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:

 

http://web.archive.org/web/20111205223402/http://www.gryphon-strategies.com/ (the top blue menu)

Share this post


Link to post
Share on other sites
catrina    103
catrina

#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: http://support.pagelines.me/docs/customization/custom-css. For help with the font-family attribute, please see these instructions: http://w3schools.com/cssref/pr_font_font-family.asp.


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

#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: http://support.pagelines.me/docs/customization/custom-css. For help with the font-family attribute, please see these instructions: http://w3schools.com/cssref/pr_font_font-family.asp.

 

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

 

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

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
gryphon    0
gryphon

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?

Share this post


Link to post
Share on other sites
Rob    547
Rob

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: http://www.w3schools.com/css/css_font.asp


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
gryphon    0
gryphon

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: http://www.w3schools.com/css/css_font.asp

 

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

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.

 

http://www.pagelines.com/pros/


Please search our forums, before posting!

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  

  • Similar Content

    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.


    • PierreFF
      By PierreFF+
      Hello, 
      I have an issue with NavPro on mobile when the link of the menue is on the same page. 
      Here is my website: http://foundersofthefuture.co
      The isssue comes from the fact that in my menue most of the items send somewhere else on the same page using anchor link (eg. #container_u788888). 
      This works well on desktop but on mobile, nothing happens when clicking on the link. One of the link of the menue of the homepage "France" sends to another page of the website and this one works well even on mobile. 
      I am using the Pagelines framework theme and also used a wordpress plugin (jQuery Smooth Scroll) for smooth scrolling . 
      Thanks in advance for your help and let me know if I need to provide more information. 
      Best,
      Pierre
    • DanatTLFN
      By DanatTLFN
      Site URL: thelocalfilmnetwork.com
      DMS Firmware: 2.2.1
      Wordpress: 4.5.1
      --------------------------------------
      Ticket Reference: 
       
      At the bottom of this post, there is a CSS only option that I have implemented into my site. It looks brilliant, and I am super grateful for that addition to the thread. The only issue I am having is that the code he provides does not include all of the styling options for the button itself.
      My question is, how might I go about editing the styling of the button i.e. shadows, every element of the coloring, and border colors?
      No big deal if it's not easy to fix. Happy to provide any further information if necessary.
      Kind regards,
      Dan
      P.S. I have opened up the button in Google Dev window with Inspect and start editing it there, but it looks like there are some areas of the code that are connected to an external source (most likely bootstrap) and therefore I can't seem to edit it as much as I would like.
    • tristanrodgers
      By tristanrodgers+
      Hi there!
      I'd love to have some social media buttons in my navbar like my online-shop has!
      http://mc1r-magazine.com/
      Can someone explain me how to create them? I tried a lot but don't know how to realize them...
      Greetings from Germany,
      Tristan
    • jeomiland
      By jeomiland+
      Hi guys. Just now trying out Platform 5. I like the reletive simplcity of the new interface but there are things I'm used to in DMS that I'm not seeing yet in 5. Is there a good manual, documentation, video series about some of the basics?
      In particular, I've got a simple navigation menu, created the standard way in WP menus section with several top level parents, then 3-4 children menu items below a couple parent items. Have them moved to the right to create the standard parent-child relationship but all I see on the page is the parent level items - no dropdown!. So I changed themes from Platform5 to the standard 2015 default theme and now I see absolutely no menu at top, except for the mobile (hamburger?) icon.
      In DMS, one had Navi and Navbar, etc sections and each would work differently and give different results. How do you work the menu system in 5? And how get different results ?
      thanks
×