Jump to content
webmktco

BrandNav menu not floating right in IE 8-10

Recommended Posts

webmktco+    21
webmktco

I'm trying to figure out why the menu in the brandnav is not floating to the right of the logo in header in IE 7+.

 

I've tried using the Browser Specific CSS plugin, but no luck.  

 

I'm hoping to avoid ODesk and see if anyone here can help out.

 

Thanks in advance!
 

Here's the site:  http://www.rowandental.com

 

2013-06-20_16-51-15.jpeg

  • Like 1

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi,

 

It appears related to the hook you're using, or the CSS related to the hook, which isn't properly set for IE.  You may simply require some browser specific CSS.

 

Can you paste the CSS and hook used in http://paste.pagelines.com?  This would help us determine of there's an error.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

Well, you just explained it!

 

You're using inline CSS as a span, rather than setting up a unique div, that would break apart from the div containing the menu.  Essentially, IE is reading your menu like this:

menu menu menu phone

info.

 

With a proper div and unique class, your menu should be read by IE as

menu menu menu

phone

info

 

Since IE sees the phone number on the same line as an H2 tag, it's just wrapping the entire menu below the branding image, causing it to move from the top of the page (as in Firefox), to the bottom of the logo.  It uses the rules of the H2 tag, not the rules you determine, for the placement of the phone number.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

This seems to now be working? http://d.pr/i/BJkH


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
webmktco+    21
webmktco

Unfortunately, not in IE 10.

Share this post


Link to post
Share on other sites
webmktco+    21
webmktco

OK. I fixed it.. by adding

clear:both; 

to the .contact div.

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Thanks for letting us know - sorry i couldn't test it straight away as i am on a mac and they won't let us use IE :( 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

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