Jump to content
King Creative Design

Customize BrandNav

Recommended Posts

King Creative Design+    0
King Creative Design

Is it possible to move the navigation down independent of the logo in the BrandNav section? I am trying to move it so it is flush bottom with the logo (see attachment).

I would also like to reduce the gap between the feature slider and the calls to action below without affecting the main content margins. Any help would be appreciated.

The site URL is - http://www.bikramyoga-sp.com

Thanks!

Michele

post-29945-0-79595700-1349637129_thumb.p

Share this post


Link to post
Share on other sites
batman    389
batman

Hi Michele

You can try add in

PageLines > Site Options > Custom Code > CSS Rules

#brandnav .brandnav-nav { margin-top: 40px;}

Modify #px as you like


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
King Creative Design+    0
King Creative Design

thanks, perfect!

Share this post


Link to post
Share on other sites
Rob    547
Rob

The topic was marked as resolved.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
pmmyers    0
pmmyers

Hi, I used this method for the same issue, and it works, however, when testing in different browsers, it looks different, like  the logo is 40 px difference.

 

Just wondering if you have encountered this and how to resolve. www.papasaukauai.com

 

Thanks!

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there ,

 

It would depend which browser you were seeing the difference in. Usually there shouldn't be any differences unless its down to IE8 etc.

 

We have a browser specific plugin which adds browser classes into the layout for you to make set adjustments, see http://www.pagelines.com/store/plugins/browser-css/ for instructions and a list of the classes - http://support.pagelines.me/docs/plugins/browser-specific-css/

 

You could then apply the changes on a per browser basis for the one you were having issues with.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
pmmyers    0
pmmyers

Well, the issue seems to be that the location of the brandnav and branding is not consistent in the same browser on different computers.  (I am trying to get the menu to align with the bottom of the branding.)

 

Would this solution of a browser specific plugin address that issue? 

 

Oh, the browsers in question are Firefox and chrome. It is consistent in Safari on different computers.

 

www.papasaukauai.com

 

Thanks!

Share this post


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

Can you provide screenshots of the issue, also provide a screenshot for each browser on each OS, also inform us of the browser versions on each OS.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
pmmyers    0
pmmyers

Yes,

 

this is the code I placed in the custom css window in pagelines 

#brandnav .brandnav-nav { margin-top: 60px;}

 

 

And I just tried it again and changed the value to -30 px and now it is consistent across all the browsers, I don't know why but it is working....gross user error? hahaha anyway, thank you!!

Share this post


Link to post
Share on other sites
Rob    547
Rob

Is this issue now resolved?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
pmmyers    0
pmmyers

yes, it was resolved before. thanks!

Share this post


Link to post
Share on other sites
Rob    547
Rob

Thanks.


Former PageLines Moderator, Food Expert and Raconteur

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


  • Similar Content

    • briana
      By briana
      I want to highlight the DONATE menu item in my navigation (www.stilleasierthanchemo.com) by default without the user having to hover over the link. I've attached an example of what I'd like it to look like (run4massey.org). How do I change the background color of the DONATE link without changing the background color of the entire BrandNav menu list?
       
       
    • chasenet
      By chasenet
      I'd like to include the twitter icon on the nav of this site: http://192.185.73.118/~fosterwi/
       
      The icons don't show at all with just BrandNav in the drag and drop header. If I use a different nav (that shows the icons) the actual nav bar is no longer where I want it. 
       
      How can I get it to look like the attached image?
       
      Any help much appreciated.
       
      Latest WP and PL
    • Keith Vaugh
      By Keith Vaugh+
      Hi Folks.
      I am wondering if might lend your expertise once again.
       
      I am trying to modify the header on our site www.magva.com (latest version of Framework and WP). It is a brandnav section and the aesthetic that is on the site at the moment is pretty close to what I want. However I am sure there is a better way to achieve it.
       
      It was necessary for me to create the logo having the full width of the page i.e. 1040px * 90px. - Is it possible to center it some how and have the logo as simple 340px * 90px (its original size)?
       
      The larger width of the logo caused the nav element to wrap onto the next line - which is what I required (the reason of the larger width).
       
      I have used the following CSS code to achieve the look:
      /* sets the branding nav header to full width */ #site .section-brandnav .texture { max-width: 100%; background: #1c0c09; } #site .section-brandnav .content { background-color: #1c0c09; } /* this changes the font size of the Nav bar, its position and the colour of the menu drop downs */ #site .section-brandnav .brandnav-nav { float: none; } #site .main_nav li a { font-size: 15px; } #site .main-nav .menu-item ul li a { color: #ffffff; } #site .main-nav .menu-item li:hover a { color: #ff4000; } #site ul.sf-menu li a { padding: 10px 36px 10px; } My biggest issue with this approach is the padding I had to use. Really I wanted the buttons to spread out over the page and be centered. Now when you look at some of the drop downs, the text is wrapping which I'd like to avoid. Also causes problems on mobiles.
       
      I'm not adverse to using an alternative nav bar if I can achieve the aesthetic. 
    • jennajonesdesign
      By jennajonesdesign+
      Hey Guys!
       
      I actually have the developer edition, however it does not seem to let me post there. 
       
      In my sections I do not have an option for branding or brandnav? Is this just me? I see that section in the demo, but nothing on my installation. I attached a screen capture so you can see for yourself. Let me know what I am missing!
       
      Thanks. 
       
      Jenna
    • lakersalex
      By lakersalex
      I'm not sure how or when it happened, but this website I built a while back is now missing the drop down menu and arrows in Safari only. Chrome and Firefox are working fine.   Website: http://www.marcselwynfineart.com   Framework Version: 2.4.1   WordPress Version: 3.5.1   Plugins in Use:  wordfence use-google-libraries sucuri-wp-plugin reveal-ids-for-wp-admin-25 post-types-order portfolio-slideshow-pro pagelines-sections pagelines-googlefonts pagelines-customize launchpage google-sitemap-generator duplicator display-posts-shortcode contact-form-7 cloudflare better-wp-security   Any clue what might be happening?
×