Jump to content

Archived

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

sfmstudios

Double Navigation and Responsiveness

Recommended Posts

sfmstudios

I'm having trouble figuring out how to manage the responsiveness on my fixed header.  I have two NavBars (one left for social icons, and one right for main page navigation).  When the screen width shrinks to less than 830px, the wrapping begins with the social Navigation, and eventually two "Menu" buttons appear for the mobile view.

 

What I'd like to have happen is the social navigation to stay visually as-is, and the page navigation to switch to the "Menu" button, all staying on the same single line.

 

Can someone lead me in the right direction?  Thanks!

 

Website is: http://bodyandsoulcoaching.com

 

Screenshot of current responsive look.

Share this post


Link to post
Share on other sites
Aires

Hi sfmstudios

 

You will need to use some html combined with font awsome thats included with DMS inside of a textbox or mediabox.

 

The html:

 

<div class="social-bar">
    <ul>
        <li><a href="#" target="_blank"><i class="icon icon-facebook"></i></a></li>
        <li><a href="#" target="_blank"><i class="icon icon-google-plus"></i></a></li>
        <li><a href="#" target="_blank"><i class="icon icon-twitter"></i></a></li>
    </ul>
</div>
 
The CSS:
 
.social-bar {
    a {
        margin-right: 10px; 
        padding: 0px; 
    }
    li {
        display: inline;
    }
}
 
~Aires

ndTgvai.jpg

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

 

Share this post


Link to post
Share on other sites
sfmstudios

Hi Aires...

 

Awesome - thanks for getting me started!  I made a couple tweaks for styling sake:

/* Social Bar */
.social-bar {
    a {
        margin-right: 10px;
        padding: 0px;
      	color: rgba(63,52,48,0.6);
    }
  	a:hover {
    background-color: #C6C6C6;
    border-bottom: solid 5px @green;
  }
    li {
        display: inline;
    }
}

And have a couple tweaks left to make:

 

1) The hover background does not fill the whole icon - tried playing width background-height or line-height to no avail....what am I missing?

 

2) When the site "goes mobile", the "Menu" button from the NavBar gets pushed to a second line.  How can I keep it on the same line?  Pictured here.

 

3) The space underneath both the Text Box and the NavBar was off just slightly, so I added a "margin-top: 10px;" to the Inline CSS Styling section...is there a better way to do that?

 

Thanks again.

Share this post


Link to post
Share on other sites
Aires

Hi sfmstudios

 

Give this a try for the  for the mobile view

 

@media screen and (max-width:768px) {
#textboxu96n9av {
  display: inline-block;
  width: 50%;
  float: left;
}
 
#navbaruxh8p35 {
  display: inline-block;
  width: 50%;
  float: left;
}
}
 
 
and for the hover state try this
 
 
.icon:hover {
  color: rgb(108, 155, 129);
}
 
~Aires

ndTgvai.jpg

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

 

Share this post


Link to post
Share on other sites
sfmstudios

Excellent stuff - works well!  Thank you for your assistance.

Share this post


Link to post
Share on other sites
Aires
No problem


Sent from my iPhone using Tapatalk

ndTgvai.jpg

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

 

Share this post


Link to post
Share on other sites

  • 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
    • sfmstudios
      By sfmstudios+
      I'm using the boxes section on a local development site to play around with some options, and running into an issue.  
      Have the following settings for the boxes:
      Type: Images/SVC Media on Top Image Appearance: Standard/Default Image/Icon Width: 280px Image Opacity: 100% Each of my box images is 280x150 in size, but the result of the image on the box is a strange zoomed-in, cropped square (see attached).  I looked to adjust border properties via CSS, but couldn't find a fix.  What solutions are out there?

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