Jump to content

Archived

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

ssgro66

Two Column Section Alignment

Recommended Posts

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

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

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

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

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

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

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

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

    • sakkthi subramaniyam
      By sakkthi subramaniyam
      Working on a very old site which has  pagelines framework theme. I need section plugin. so i can install postpins section. I have lost backup copy.
      Thank you.
    • Liv Kundalini
      By Liv Kundalini+
      Hi -
      Pulling my hair out over here, and would love an assist!
      Site I am building, http://www.livkundalini.com/home, has a problem with the submenu items in the nav not appearing. 
      If anyone wants to see what the Nav should look like, feel free to look in the footer on the left hand side.
      Have tried disabling Pagelines and using the twentyseventeen theme, but problem persists.
      Saw this error (pasted at the bottom of this post) displaying in the inspector, and saw discussion of Jetpack potentially being a culprit. Disabled Jetpack, but the problem persists.
      Had the hosting company even flush the server-side cache, but no avail.
      Any thoughts? Please? It's the only thing keeping me from launching this site!
      Many Thanks,
      Todd
       
      WebSocket connection to 'wss://public-api.wordpress.com/pinghub/wpcom/me/newest-note-data' failed: Error during WebSocket handshake: Unexpected response code: 403   O @ (index):7
    • russe-intensif
      By russe-intensif+
      Hi team,
      checking my site today, i'm surprised to see my MegaNav all in bottom of the pages, while it's in header.
      After getting to change it in couple of pages onto Template part (too time consuming !), i'm desperate and ask you for help :-)
      apprendre-le-russe-avec-ania.fr
      Thank you in advance !

    • elementalkites
      By elementalkites+
      Good evening. I am attempting to use the Impulse section on a page I am working on (https://dev.elementalkites.com). The tool seems to have the ability to overlay a logo on top of the slider images but in my case it isn't working, even though I have added the logo file and given it a height to display at. I have attached a screenshot for reference. Any help would be appreciated.
       
       
    • 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>  
×