Jump to content

Archived

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

photomom86

Padding or Margin & Font for SimpleNav

Recommended Posts

photomom86

Hello again, I've got 2 columns in my header, one is my logo/brand & the other is my social media buttons and a simplenav menu. I created this header based on the "branding area" tutorial in the pagelines docs. My issue is the SimpleNav is really really close to the top of the page and the font is so small that it's hard to read or see. It kind of blends in.

 

My question is this:

Is there some code I can add in the custom css to push it down just a bit?

Is there some code I can add in the custom css to change the font to H4?

 

Thanks!

 

jQXq9Cp.png

Share this post


Link to post
Share on other sites
Aires

Hi @photomom86 

 

You can do this by adding a custom class to the simple nav.

 

So add something like my-simple-style (or what ever you want to call it) to the custom style area with in the simple nav options. And add this to the css

 

.my-simple-style {
  font-size: 20px;  //changes the font size
  margin-top: 20px;  //adds space to top of simple nav

 

You may not need both sometimes changing the font will add some padding

 

Hope this helps

 

~Aires

 


ndTgvai.jpg

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

 

Share this post


Link to post
Share on other sites
Danny

photomom86"] - Did @[member="Aires guide resolve your issue ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
photomom86

Aires thanks that's exactly what I needed for the crowdedness.

 

Danny yes that answered the spacing issue, is there a way to make the font be h4?

Share this post


Link to post
Share on other sites
Danny

The font be h4, not sure what you mean ? Are you referring to the menu items ?

If so, menu items should really use a header tag and there is no way for you to alter the tag without customising the section which is something we do not provide support for. However, you can attempt this yourself, by creating a child section via a child theme and editing the section.php file.

However, by doing this you will likely need to add a lot of additional CSS/LESS as the styles are targeting a tags and not h4 tags.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
photomom86

Danny I am meaning heading 4 because I have headings 2, 4, & 6 to be a fancier font than the rest of the site. So basically there's no way to change the font of the simplemav menu items to the "lobster Two" google font? If it's not easy then I'll just keep it.

Share this post


Link to post
Share on other sites
Aires

Hi photomom86

 

You can change the font but im not sure how you would include a google font into a style.

 

But you can use this site for CSS fonts and easily change the way the nav looks.

 

http://cssfontstack.com/

 

just add the lines below to your current style. 

 

font-family:"Papyrus";  //change the name in ""
font-weight: bold;  //if you want bold on the text
 
~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

Hi photomom86

 

After some research I found that you can add google fonts with css and a link. Go here to the google fonts website https://www.google.com/fonts# find you font that you would like to use-- in your case Lobster two click add to collection 

 

at the bottom of the page you will see three options 

 

http://i.imgur.com/cXidEkh.png

 

choose use and follow the steps

 

http://i.imgur.com/yPYs1li.png

 

I tested it so it does work  

 

http://i.imgur.com/mYkGxFK.png

 

~Aires


ndTgvai.jpg

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

 

Share this post


Link to post
Share on other sites
Danny

You shouldn't actually need to include the font if my memory serves me correctly, as we already include the entire Google web fonts library already. So if you just target that element or tag and use custom CSS with the font family CSS provided on the Google Webfonts page, it should work.

 

For example:

 

#site .section-navbar .navbar.pl-color-base .navline > li > a {
  font-family: 'Lobster', cursive;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.4);
}
 
Should give you something like this - https://cloudup.com/crxj5zT7s7V

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
photomom86

Danny Awesome I'll give that a try. I thought that pagelines already had the google fonts. Thanks much.

Share this post


Link to post
Share on other sites

×