Adding social media icons on right of header

Dazzling
1

HI There,

Thank you so much for developing the Dazzling Theme! I’m very new at WordPress but I’ve been able to do most of the things I want with this theme!

I would like to know how I can add social media icons on the right of my header like this site: brendonburchard.com

Here’s my website: richardbernarduniversal.com

Thank you in advance for your help!

2

It is not as easy as it might look.

There are two different ways how to do it:

  1. Simplest method would be to setup menu look like this:

Dazzling Social Header

Not the same exact thing but it is very easy to setup and it will serve its purpose.

  1. Another approach would be to add this code
<div class="social-header">
	<a href="http://facebook.com"><i class="fa fa-facebook"></i></a>
	<a href="http://twitter.com"><i class="fa fa-twitter"></i></a>
</div>

to header.php file right before:

<?php dazzling_header_menu(); ?>

And then add this custom CSS to Theme Options - Other - Custom CSS

.social-header {
    font-size: 24px;
    line-height: 36px;
    position: absolute;
    margin: 14px;
    float: right;
}

.social-header a {
    padding: 8px;
}

Icons will be on the left of menu items for better support on mobile. Otherwise there are going to be loads of alignment issues but I don’t think you want that.

3

Hi Aigars!

thank you very much for your help.

I was able to add them to the header, however, I had to change the position from ‘absolute’ to ‘right’. The problem that I’m having now is the mobile version. How do I eliminate the social icons for the mobile version? It doesn’t work properly once I add the social icons.

4

Add this to Theme Options - Other - Custom CSS:

.social-header {
  display: none;
}
@media (min-width: 768px) {
  .social-header {
    display: block;
  }
}

It will remove social media icons for tablets and smaller devices. You can play around CSS media queries if you want to style icons differently on different resolutions.

5

Hi Aigars!

Thank you again for you quick response.

I added the code to theme options. There are 2 problems

  1. The menu button is not right next to the logo for the mobile version.
  2. The header is not fixed anymore for the mobile version.

I’m not sure what to play with to fix this.

6
  1. To align logo you can use code like this. Some tweak might be required but the basic idea would be like this.
@media (max-width: 768px) {
    #logo {
        max-width: 50%;
    }
}
  1. Will not work on Mobile Safari. No fix for that.
7

Hi Aigars,

  1. How do I change the hover color for the social media buttons?

  2. I designed an image that I want to put just below the main header with an opt in form just like the one from this website: jeffwalker.com. I have the javascript from Aweber.
    My questions:

  1. Where should I place this code so that the image and opt in form is right above the post and sidebar area
  2. What dimensions should I be using for my image so that it fits perfectly with the entire screen?
8

Hi Aigars,

Here’s another problem i’m dealing with. How do I lower the sidebar or widget area so that it is on the same line as the post area?

9
  1. Social button color on hover
.social-header a:hover {
  color: #f00;
}

2.1 Place your code inside index.php right above

<div id="primary" class="content-area">

Or inside header.php if you want your subscription form on all pages not just front page.
2.2. Content area + sidebar is 1170px wide, so you might want to use similar size.

  1. You can add thes ame size margin you have added for main content area.
#secondary {
    margin-top: 70px;
}
10

Hi Aigars,

  1. I have tried to add
    .social-header a:hover {
    color: #f00;
    }

Nothing happens

  1. I have tried to add
    #secondary {
    margin-top: 70px;
    }

Nothing happens

I’m not sure why, please let me know how we can fix that.

Thank you

11

You don’t have anything added in Appearance - Theme Options - Other - Custom CSS. Please make sure to add both code snippets there and notify if they still doesn’t work.

12

Hi Aigars!

I did previously! you can check back now. I added them at the bottom of my style.css

13

I don’t find any file in the dazzling theme that says index.php

14

I found the index file!

15

There is an error in your CSS. Replace last three parts of your CSS code with this one instead:

.social-header a {
    padding: 8px;
    color:#0064bc;
}
.social-header a:hover {
  color: #f00;
}

#secondary {
margin-top: 70px;
}
16

Hi Aigars!

Thanks again, It worked!

I noticed that my font styles changes for the mobile version? How do I keep the same font style for the mobile version?

Happy New year!

17

Hi Aigars!

Happy new year!

I created a slider that I added at the top of my website it’s actually there right now.

  1. I need to know how to activate the email field that I created along with the transform button?
  2. Is it possible to make it responsive so that all the elements move when it’s on a mobile of Ipad
    or is it better if I create another design for smaller devices?
  3. I notice that the image is a little pulled upward under the header, how do I fix that?

Thank you

18

HI,

  1. How do I remove the Leave a comment, post comment button, comment box on individual pages?

Let me know if you can help me.

Thank you

19

I created this video to show hot to disable comments for separate pages. This video shows Travelify theme but it works exactly the same way for Dazzling theme as well.

20

Worked just fine!

I’m having two major issues with the mobile version of my theme.

  1. The font style changes for the mobile version, i’d like to keep the same font style.
  2. I notice that my header gets really big for the mobile version, I believe it’s because my logo doesn’t actually change size for the mobile version. I designed it using Photoshop, I could easily create a smaller one, but it will look to small on desktop version. Is there a way to modify the code for the mobile version so that the menu button is right next to the my name.

Please let me know if this possible or not as soon as you can.

Thank you