Jump to content

Archived

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

ssgro66

Two Column Section Alignment

Recommended Posts

ssgro66    1
ssgro66

I'm creating a navbar by placing a 2-column section into the header. I placed our logo in the left section using mediabox. The right will be the navigation bar. I would like the bottom of the navigation bar to align with the bottom of the logo image. The tops are currently aligned. I'm guessing this requires css coding. I'm just not sure how to go about that in DMS.

A little guidance to nudge me in the right direction would be appreciated.

Thank You,

Steve

Share this post


Link to post
Share on other sites
ssgro66    1
ssgro66

I cannot figure out what element to assign the vertical-align property to so that the navbar drops down to align with the bottom of the logo. Also, which customization method should I be using? The documentation says there are three methods: "DMS toolbar → Customize options; the Base Child theme, or the PageLines Customize plugin"

 

To clarify, this is how I set it up: In the DMS Header Section, I drag-and-dropped a Two-Column Section. In the Left Column I drag-and-dropped a Mediabox Section that holds the firm logo. In the Right Column I drag-and-dropped the Navbar Section. Maybe the way I set this up is the problem?

Share this post


Link to post
Share on other sites
fliptheu    4
fliptheu

I cannot figure out what element to assign the vertical-align property to so that the navbar drops down to align with the bottom of the logo. Also, which customization method should I be using? The documentation says there are three methods: "DMS toolbar → Customize options; the Base Child theme, or the PageLines Customize plugin"

 

To clarify, this is how I set it up: In the DMS Header Section, I drag-and-dropped a Two-Column Section. In the Left Column I drag-and-dropped a Mediabox Section that holds the firm logo. In the Right Column I drag-and-dropped the Navbar Section. Maybe the way I set this up is the problem?

 

Why not just use the nav bar with the logo all in one? 


fliptheu

"Finding beauty one picture and one pixel at a time."

http://www.fliptheu.com

Share this post


Link to post
Share on other sites
ssgro66    1
ssgro66

If you mean to place the mediabox and nav sections in the same full width section (Header) without the Two Column Section, I tried that. The nav menu is still top aligned to the image and I can't figure out what to apply the vertical-align property to so that the menu drops down. My logo is larger than the nav menu and its larger than 29px so I can't use the built in fixed Nav Bar.

Share this post


Link to post
Share on other sites
fliptheu    4
fliptheu

You can inspect the navbar properties, target it with CSS  and style to your hearts content in the CSS/LESS </>CUSTOM CODE section.  


fliptheu

"Finding beauty one picture and one pixel at a time."

http://www.fliptheu.com

Share this post


Link to post
Share on other sites
Rob    547
Rob

Sorry to intervene here, but the best solution is to either use Business Branding in our Shop (a premium product) or, provide a link and we'll help you with the CSS.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
ssgro66    1
ssgro66

Thanks for your help fliptheu and Rob.

 

Rob,

I read the Business Branding information but didn't see any mention of navigation menus as part of it. Will I be able to include navigation menus in the Business Branding Section?

Share this post


Link to post
Share on other sites
Rob    547
Rob

You can add any menu you wish to it, even Ubermenu, which is my favorite.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

  • Similar Content

    • jojoking
      By jojoking+
      I have to admit to being baffled.
      I'm trying to embed a video (from my WP media library) within a WP post using the videobox section shortcode.
      The shortcode section popup only allows two items to be configured - the section type, in this case videobox - and a unique id. There's no URL or other parameters such as autoplay or loop which are available within the Pagelines editor.
      Whatever I put in the unique ID makes no difference to what is shown which seems to be a default video with stars or white noise on a black background.
      I assume I need to define this ID somewhere else, or maybe WP has done it for me?
      HELP!
       
      PS This is the page source generated when a shortcode is added within the WP post editor
      <!-- VideoBox | Section --> <section id="videobox_1675853156" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="1675853156" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="280414138" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/plugins/pl-section-videobox/default.mp4?r=280414138" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#280414138')[0].load(); </script> </div> </div></div></section> </div>  
      If I add a videobox section using the Pagelines page editor the page source generated includes my video:
      <!-- VideoBox | Section --> <section id="videobox_udvu4uz" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="udvu4uz" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="429558737" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/uploads/2017/04/HIHWelcome.mp4?r=429558737" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#429558737')[0].load(); </script> </div> </div></div></section>  
    • bnapoli
      By bnapoli+
      http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks
    • flourishdesignstudio
      By flourishdesignstudio
      Hi,
      I am having an issue with the Lax sections on Platform 5. I can embed a widget or text box into a Lax section which is really neat, but the image in the background (the parallax image) seems to get stretched and doesn't scale in an attractive way.  For example, the page http://ed6.61e.myftpupload.com/#clients has a parallax section with a woman's face  and I thought is would scale as the browser window gets smaller but the zoom-level never changes. Also, the amount of parallax shift seems more dramatic than what we want. I thought that if I uploaded a shorter image it would scan/scroll less since the height from the image's top to bottom would be less. However, that doesn't seem to have any effect and I am at a loss of how to properly control the way the image is displayed within that box. Any thoughts, tips, or suggestions to get me pointed in the right direction?
      Thanks so much for the help!
    • PierreFF
      By PierreFF+
      Hello Everyone, 
      I think this one is for the pagelines team. 
      I have some trouble with the Adventure section plugin https://www.pagelines.com/product/pl-section-adventure/ that doesn't seem to load in any of the three websites I run using pagelines. 
      I do the setup via the extend platform as usual. It tells me that the plugin is installed and activated but unfortunately it doesn't appear on the page editor.
      I have just tried it consecutively with three websites I own with the same result.
      My intention was to use it with this website: http://launchpadweekend.foundersofthefuture.co/ (free version)
      And I also tried with this website http://foundersofthefuture.co/ (pro license) and this one http://ffactor.me/ (free version). And I have the same problem with each. 
      I would love to see how I could solve this issue. 
      Thanks a lot. 
      Pierre
       
    • nadielp
      By nadielp+
      Hi Everyone,
      I am trying to get a single navigation item to center. I am using a scroll menu in the navigation component of Impulse. I would like to have the item in the center of the page but it defaults right. I tried setting the item to center a few different ways and nothing is working. I added {
        display: inline-block;
        position: relative;
        text-align: center;
      }
      but that didn't work...any help would be appreciated. Site is at http://vetpaw.org/new
       
      Thanks!
      Daniel
×