Jump to content

Archived

This topic is now archived and is closed to further replies.

nfp1900

Fixed Navi covering page titles when page resized

Recommended Posts

nfp1900

Hi

 

I wanted some advice to get this final thing fixed. On this site there is a hook with the contact info and then the Navi. On most pages is a canvas area with the page title: http://screencast.com/t/6bN3T3JBw

 

I'm finding two things: on Safari Mac the title section drops down from the Navi but in some cases it stays hidden which must be a javascript issue - I don't see it on Chrome or Firefox. 

 

Secondly when resizing the window the menu falls over part of this title. Is there a way to force the canvas area to respond? http://screencast.com/t/EBSSVnABLkG

 

The hook with the phone/email is in pagelines_before_navi - is that the best place for it?

 

There's only a little bit of CSS for the navi but I have made it larger than the default. 

 

/* adjust logo size */
.section-navi img {
max-height: 100%;
  margin-left: 28px;
}

 

/* add border to nav bar */
.navigation-border {
border-bottom: 3px solid;
border-color: #f6f6f6;
}
 
/* adjust height of navi area */
.pl-fixed-region.pl-region {
height: 100px;
}
 
/* menu height */
.section-navi .navi-right {
float: right;
margin-top: 30px;
}
 

Share this post


Link to post
Share on other sites
Danny

Hi,

 

This appears to be caused by your custom code especially those margin-tops on the navi logo image and navi right div. Unfortunately, we can not provide support to user created code.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900

so can you provide some none 'user created' code? Otherwise this forum is pretty redundant

Share this post


Link to post
Share on other sites
Danny

Our support is not redundant, we provide technical support to our users for issues or questions related to our products. However, your issue is caused by your own custom code which isn't covered by our support. As the issue isn't with our product, but your code, you will want to either contact our helpdesk and ask for the contact information for our trusted developers and agencies or ask your question on a coding forum such as Stack Overflow.

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Aires

Greetings nfp1900,

 

I am guessing that your are noticing this over lap from just sliding the browser in and out which IMO is a bad practice. So I would suggest that you use the googles device tool and see if you still see the overlap across other popular devices.

 

Personally if the device is not on googles list its not important but again thats just my opinion.

 

If you have never used the tool before press F12 and the device tool is right beside the search element.

 

If you find a device that has an overlap you will then need to use a media query with the width of the device to make changes.

 

Be sure to refresh the page when advised to and I will also add that google device mode is pretty damn accurate.

 

~Aires 


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Aires

As for your hook I am not entirely sure why you would go that way when you could just add another section (textbox) to your fixed area and add your html to that. 

 

~Aires


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
nfp1900

Hi Aires

 

Appreciate the input.

 

No the weird overlap was happening on some client versions of Safari where the title was hidden - I realise it doesn't make sense to mess around with the window size but I was just showing that to illustrate the issue. I don't see this problem on mobile/ipad.

 

Thanks for the feedback on the hook, nothing like overkill! The approach was supplied by this forum so i will try a simple text box.   I might have to rehash the nav anyhow as it looks like the client is changing some things last minute. 

Share this post


Link to post
Share on other sites
Danny

Another alternative would be to use a media query to reduce the width of the menu item font size so that it doesn't cause the navigation to go to a new row, before the mobile menu kicks in.

 

Or remove the Margin-top as I mentioned above.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×