Jump to content

Archived

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

mbcowan

Navi Section Title Text Formatting

Recommended Posts

mbcowan

I'm trying to format text and a logo in my nav bar (perhaps not the best way to do it, so chime in if you'd suggest an alternative) and having difficulty with formatting the overlapping elements, in addition to negotiating the pl-animation classes that are already part of the section title.

 

I've put this into the Standard Title field in Navi: Heartbeest<br><h6 style="color: white;">Everything Matters</h6>...

 

and added the following in Custom LESS/CSS:

 

/* Section Title Formatting */
.pl-section-title {
  color: #fff;
  position: relative;
    left: 0px;
    top: 10px;
    z-index: 1;
}
 
/* Logo Formatting*/
.section-navi .navi-container {
height: 100px;
  padding-bottom: 20px;
  color: #fff;
}
/* Nav Formatting */
.section-navi ul  {
  font-size: 16px;
  color: #fff;
}
 
/* Nav Search Formatting */
.btn-search {
  font-size: 16px;
  color: #fff;
}
 
You can see the results at: mbcowan.wpengine.com.
 
Want I want is to shrink the vertical height of the entire section to about 150px, put the logo and navbar at the top of the section and push the title and subtitle below the navbar baseline and just to the right of the logo.

Share this post


Link to post
Share on other sites
Danny

Hi,

 

To achieve what you want to achieve is possible, but would require extensive custom CSS, which isn't something we provide support for. To align everything, you're going to need to target both the header and subtitle text elements has they use h2 and h6 tags, header tags are block elements meaning you can't have them on the same line. To have them on the same line you're going to need to change their width and use a float, then reposition the nav-wrap i.e. the menu and logo. By doing this, you will likely cause a lot of head aches when it comes to the responsiveness of your header/navigation. Therefore, I recommend you try using multiple sections instead.

For example, Add 2x MediaBoxes to your Header, and then add a Navigation section, so in all you have three sections in your header. To align them up, reduce the width of each of them. For example, the left MediaBox is going to house your logo image, so that can be something like 2/12, the second MediaBox is going to house your header and subtitle, so that can be something like 5/12, then reduce the width of the Navi section to 5/12.

Then add your logo image via HTML so it is a clickable link, add your header/subheader and configure your navi section. This will require some work to align properly, but will be much easier and less extensive than using the method you're using now.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • decmech
      By decmech+
      Hey Guys,
      Having some issues with the dropdowns for the Navi in DMS. For some reason I can't have any more than 2 levels in the dropdown. The cursor is hovering over RPAS Training (and the arrow to indicate more is visible) but no matter what browsers, it never shows up. Also inspecting the HTML shows that the additional fields are not there.
      I have inspected the PHP and cannot see anything that is limiting the number of levels. Any assistance to get the additional levels showing would be great.

    • 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
    • Kedark
      By Kedark+
      Hi,
      how to set the menu navi:
      - The background color when you expand a submenu,
      - Background color on mouseover,
      - The color of the text,
      - Width of submenu
      Please help, nowhere in the forum I have not found the answers to these questions ..
      Regards
      RKA
       
    • 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
    • triggerfish
      By triggerfish+
       I have setup the Navi (content width) to show the burger icon for my menu system (desk and mobile).
      It works great..displays only the Burger..BUT ONLY when on the Default Menu (which is not a real menu, but some random selection of pages).
      As soon as I select the MAIN Menu in the Navi settings it suddenly displays all of the menu items...which I don't want.
      The domain is not pointed yet..it is at 162.219.161.131
      If you know how to trick your computer the website is here... http://phw-homes.com/home-dms-2


×