Nabia – WordPress Modern Blog Theme

Nabia Wordpress Theme

Nabia is a Modern Blog Theme for WordPress developed by me. It has a responsive layout, built upon the Bootstrap 3 framework.
The two sidebars will give your blog a modern nice look. This theme is suitable for any kind of blog, gaming, movies, review sites, etc.

Nabia has a lot of settings and options which will give your site a unique and personalized look.

  • Nabia uses the WordPress native Customizer, allowing site admins to tweak theme settings, color scheme or widgets, and see a preview of those changes in real time. The changes won’t go live for your visitors until the Save button is clicked.
  • Responsive design, providing an optimal reading and navigation experience for any screen resolution.
  • 9 post formats supported:
    • Aside post format
    • Audio post format
    • Video post format
    • Status post format
    • Quote post format
    • Image post format
    • Gallery post format
    • Chat post format
    • Link post format
  • Two sidebars
  • 6 custom widgets:
    • About Author (slider + text)
    • Facebook Likebox
    • Custom login form
    • Photo gallery
    • Recent posts / comments
    • Social profiles
  • Built using Bootstrap 3 framework
  • Valid HTML5 / CSS3
  • Translate Ready .po/.mo files included
  • 5 predefined color schemes
  • Unlimited colors
  • 600+ Google Fonts
  • Easy to setup
  • Contact Form 7 style forms style included
  • Custom background for each post / page
  • Custom header for each post / page
  • Widgetized footer area
  • Easy logo upload
  • Easy favicon upload
  • Animated effects on post loading (can be disabled)
  • Breadcrumbs navigation
  • Included post pagination
  • Featured post carousel (can be disabled)
  • Easy change footer copyrights
  • Two menu areas (top, footer)
  • Two menu styles for top menu

You can download Nabia from WordPress Theme Directory

Written by Marius Enache

Marius is a programmer and internet marketer and is the founder of Marketingshot.com. He has over 4 years of experience working with WordPress, SEO and web design. In February 2014, started his way to internet marketing industry.

Comments (68)
  1. PJ says:

    Hi, out of 100’s of Word Press themes , I picked Nabia. I love the look and feel. It is so different from the other Word Press thems. I was getting worried until I ran into yours!Must be the HTML5? Thank you for creating such a fun and beautiful theme.

    I need help finding the HTML so I can put SumoME script into the .
    I am a showing my newbie”ness”.. I
    Thank you for any help. PJ

    Reply
    • Marius Enache says:

      Hi! Yes, the theme uses HTML5.

      If you need to edit the HTML code, you need to edit the theme files (these files together are responsible for generating the HTML code). I have no idea what SumoMe script is 🙂

      Reply
  2. Serge says:

    Hi Marius, About the topmenu drop down. I’m using a third submenu (1Water – 1.1Fish – 1.1.1Goldfish) but I don’t see this 3th submenu?

    Reply
  3. Heather says:

    I’ve added the suggested .header code to the end of my style.css and I’m still having a problem with my header. Initially the problem was the same as others, header not resizing on mobile and now, with the addition of the above code, my header width responds to my device but..it is horizontally tiled in the allotted space for the header. So, I have 4-5 horizontal headers tiled together. Any ideas on what I’m missing or doing incorrectly? Any help will be greatly appreciated!

    Thank you,
    Heather

    Reply
    • Marius Enache says:

      Hi Heather!

      The “background-repeat: no-repeat;” should stop the image from repeating itself.

      Try also with this css code.

      .header-background {
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      }

      Reply
      • Heather says:

        Yikes! The “background-repeat: no-repeat;” definitely didn’t work for me. I replaced that code with the above code and now I have no header at all.

        Reply
        • Marius Enache says:

          Then, I think you also need to set a height for it, like:

          .header-background {
          background-size: contain !important;
          background-repeat: no-repeat !important;
          background-position: center !important;
          min-height: 250px;
          }

          Reply
          • Heather says:

            Thank you for the suggestions, I never did find anything that allows the header to properly resize for mobile devices. Right now, the header looks awful on mobile but, I like the theme otherwise so I’ll launch and continue to look for a solution.

            Thanks again,

            Heather

  4. ana says:

    Hi, I have some problem on my homepage background is like this http://carobnisaveti.rs/

    but when I click on category page its like this
    http://carobnisaveti.rs/category/zdrava-hrana/
    and I wont it to be like on category page, so where is the problem?

    and also I get this:
    Warning: Creating default object from empty value in /home/carobnis/public_html/wp-content/themes/nabia/includes/customizer/customizer.php on line 1510

    any suggestion?

    tnx

    Reply
    • Marius Enache says:

      Hi Ana!
      I think you already solved the problem with the background because it looks good on both pages.

      Are you getting that error message when you go to the customizer (Appearance->Customize), when saving the options, or also on other pages?

      Reply
      • ana says:

        error is showing only when I go to appearance – customize.
        and problem with background is when I set (in appearance – customize-background image) what I wont it seams that when I create new post or page that rule don’t apply on new page, and than I have to re-adjust it in section custom background. so what to do to make change that I made in customize to be default? sorry for bother you and once again tnx for the all help you provide

        Reply
        • Marius Enache says:

          The error from the customizer seems to be due to the changes made to the customizer in the latest WordPress version.
          Open the customizer.php file ( from: nabia/includes/customizer/customizer.php ) with a text editor. Go to line 1510 and comment that line (add // before it) or delete it.

          I’ve done a few changes to the code of the background image. Now the default values from the customizer should be used for every page.

          Open the init.php file ( from nabia/functions/init.php ). Look for nabia_custom_bg() function and replace it with the code from Pastebin http://pastebin.com/3N1YF0Lg

          Reply
          • ana says:

            thank you, so so much, I done it 😀

  5. Noelia says:

    Hellooo! I have a problem with the mobile view of the blog. It doesn’t appear as un the pc versión. What should I do?
    Thank you so much
    Noelia

    Reply
    • Marius Enache says:

      Hi! The theme has responsive design which means it will look different on mobile.
      On mobile devices, the theme will have a single column different from three columns as for desktop version.

      Reply
      • Noelia says:

        Hellooo again! If you go to my blog with the pc and with the mobile you will ser what I mean. I know that thre are just one colum, but should look like the original one, even the colours are diferentes. What Am I doing wrong?
        Maybe this helps:
        REQUIRED:.screen-reader-text css class is needed in your theme css. See See: the Codex for an example implementation.
        RECOMMENDED: Screenshot size should be 880×660, to account for HiDPI displays. Any 4:3 image size is acceptable, but 1200×900 is preferred.
        RECOMMENDED: No reference to add_theme_support( “title-tag” ) was found in the theme. It is recommended that the theme implement this functionality for WordPress 4.1 and above.
        INFO: More than one text-domain is being used in this theme. This means the theme will not be compatible with WordPress.org language packs.
        The domains found are nabia,cmb,twentytwelve
        INFO: At least one hard coded date was found in the file single.php. Consider get_option( ‘date_format’ ) instead.
        INFO: includes/metaboxes/metaboxes.php The theme appears to use include or require. If these are being used to include separate sections of a template from independent files, then get_template_part() should be used instead.
        INFO: functions/filters.php The theme appears to use include or require. If these are being used to include separate sections of a template from independent files, then get_template_part() should be used instead.

        Reply
        • Noelia says:

          And this too
          WARNING WP_DEBUG is not enabled! Please test your theme with debug enabled before you upload!

          Thank so much

          Reply
        • Marius Enache says:

          None of the information provided from the Theme Check plugin is related to your problem.

          Indeed, I’ve accessed your website from a mobile device with Android OS and what is displayed on mobile it looks like a completely other theme. This doesn’t occur when you resize the browser window on a desktop (that’s the way I’ve tested your site the first time).

          I think this is caused by the Jetpack plugin (from the source code of your website it seems to be active). So, make sure Jetpack’s “Mobile Theme” feature is not enabled, because the Nabia theme is already mobile optimized.

          Disable that option if enabled and clear your browser’s cache.

          Reply
  6. Karin says:

    How do i get photo’s in the featured carrousel under my header?

    Reply
    • Marius Enache says:

      Seeing your site it seems like you already found out by now.

      Reply
      • Karin says:

        Yes one, but how do i get 4 next to eachother?

        Reply
        • Marius Enache says:

          1) Method 1 – When you add a new post you should see a panel in the upper right side of the page called “Post Options”. You should see a question “Display in featured carousel?”. Select “Yes” and click the “Publish” button.

          2) Method 2 – Go to Appearance->Customize->Featured Carousel
          If you leave “Display in featured carousel” to “Individual Posts”, the carousel will display the posts defined via method 1.
          If you choose “Category”, you need to choose a post category. This way, the carousel will display the whole category of posts assigned to this category.

          Reply
  7. Cassie says:

    Hello Marius and thanks for the theme!

    Could you help me with the top primary menu?

    First, I would like to edit it so that the drop down menus show from hover instead of clicking.

    Second, my first level drop down menus show fine, but any beyond that do not show up. For example, if I have Resources > Money > Taxes, Taxes and beyond do not show up unless I click and go to the “Money” page.

    I hope my troubles make sense!
    Thanks for any help you can offer.

    Reply
    • Marius Enache says:

      Hi Cassie!
      The theme uses Bootstrap’s menu structure to generate the menu. Unfortunately it is kinda limited and it doesn’t have an option to make the menu open on hover instead when you click it. There are some code hacks that would allow this, tried to implement something, but other problems occurred later and I’ve abandoned this idea.

      Another limitation of Bootstrap is that each menu item can only have a one level submenu. This is the reason why the links beyond the first level are not displayed.

      Reply
      • Leland says:

        Love your theme! Thanks so much, cuz it is making a much better impact on my site.

        As with Cassie, I’m having trouble with the top menu. I started with category menu tabs with one submenu tab. I have the menuimage plugin installed to add icons to the menu tab.

        I can both hover and pick and still not see the submenu items. Still in the process of working on the final format, but you could tell me how I can fix this menu? I’ll try disabling the menuimage plugin to see if that works while I wait for your reply! Site is http://rad-r.com

        Leland

        Reply
        • Leland says:

          Well, it’s obviously a conflict with the menuimage plugin! Any ideas how we can make these work together?

          Or if you have another method of adding icons to the menu tabs without the plugin, I’m all ears!

          Leland

          Reply
          • Marius Enache says:

            Hi Leland! Glad you like the theme.
            The theme already integrates the wp-bootstrap-navwalker ( https://github.com/twittem/wp-bootstrap-navwalker ). This means that it already allows you to add icons to the menu.
            For more details, download the documentation file from: http://marketingshot.com/wp-content/uploads/2015/08/Documentation.zip and open the ReadMe.html file.
            Scroll down until you reach the F) point, which is Menu Styling.
            You will find more information there on how to add icons to the menu without a plugin.

          • Leland says:

            Hey Marius I solved my problem! Using menu-icons plugin and it works beautifully with yours!

            I’m loving this combination!

          • Leland says:

            Thanks for the Glyphicon links, I wasn’t aware, but I had some custom images I had created myself and Glyph doesn’t “quite” cover my categories, but close!

            I may still give that a try if this plugin messes with me…

  8. Patty says:

    It seems the carousel only displays the 10 most recent posts.
    Is there a way to make the carousel display more than 10 posts?

    Reply
    • Marius Enache says:

      Hi Patty!
      There’s no option to change the maximum number of posts displayed in the carousel.
      To change that number you need to edit “featured-content.php” file.
      Open that file with any text editor and on line 20 you should see: “$args[‘posts_per_page’] = 10;”.
      Change 10 to any number you want.

      Reply
  9. ana says:

    Hi Marius, your theme is great! Just love it. I wonder whether it is possible to make header image to be transparent because I have background image which must be visible over to whole site?
    Once again thanks for such a great theme 🙂

    Reply
    • Marius Enache says:

      Glad you like the theme Ana.
      You can make the header background transparent by adding the following code inside the style.css file.

      .header-background {
      opacity:0;
      }

      Reply
      • ana says:

        thank you I already done that and it’s just what I wont. But I have one more question, is it possible to remove search box from the middle part and move it to the sidebar? Thx once again 🙂

        Reply
        • Marius Enache says:

          You can simply hide it from the middle by adding the following code to style.css

          #main .searchform {
          display:none;
          }

          Next thing you’d want to do is to enable the “Search” widget by dragging it into one of the two sidebar positions available.

          Reply
          • ana says:

            I have no words to say how grateful I am 😀 Just keep up with great work you do

  10. Mike Evans says:

    Where can I find a demo of the nabia theme?

    Reply
  11. PP says:

    Header image does not “resize”” … cuts off the right side of the image when screen size is smaller. Tried adjusting css – not working

    Reply
    • Marius Enache says:

      The header image should resize if you add the below css to the style.css file.

      .header-background {
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      }

      Delete your browser’s cache after. I tested it and it works for me.

      Reply
  12. asad says:

    Great theme, i love it but im facing two problems:-

    1. How i could show only excerpts, instead of a whole posts in a Latest post page?

    2. How i could put an ad in a header?

    Reply
    • Marius Enache says:

      Glad you like it.

      1) You can choose to display the post excerpts instead of the whole content from Appearance->Customize->General-> Set Content type for homepage posts to Excerpt

      2) Since the theme is not designed to display a header ad, you would need to edit the header.php file

      Reply
      • asad says:

        Appearance->Customize->General-> Set Content type for homepage posts to Excerpt

        well i have tried the above instructions but still not working?

        Reply
  13. Sarah Guidry says:

    Ok, so I am trying to make my header background image fit within the borders across all devices. On some larger computer screens it fits, but while I’m on my laptop screen which is smaller or any mobile phone the image is zoomed in at different levels to where you only see part of the image. I have gone back and forth to the wordpress forums trying to change codes to make it work but nothing works. Can you please help me?

    Reply
    • Marius Enache says:

      Hi Sarah,

      I think this should work.

      Add the following code to the end of style.css file

      .header-background {
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      }

      Reply
  14. Marius Enache says:

    Hi Tania,

    The carousel is designed to display WordPress posts (not pages).

    – You can choose to display individual posts by selecting “Display in carousel” option from the right-upper side of post edit page.

    Or display a certain category of posts. As I tried to explain in my above comment.
    By default WordPress has only the “Uncategorized” category. To add more categories, go under Posts->Categories.
    Once you define a new category you can assign new posts to it when you create a new post. You should see a panel in the right side called “Categories”.

    – You can disable the footer links by assigning an empty menu to the footer area. You can create a new menu under Appearance->Menus.
    Click on “create a new menu”, choose a name for the menu and click on “Create menu”.
    Under the “Edit Menus” tab, you should find your newly created menu.
    Check the box next to “Footer Menu” and clik on “Save Menu”.

    Now, the footer menu should not display any links.

    Reply
    • Tania says:

      thank you!

      that will help sort this out 🙂

      I appreciate your time and all the help!

      -T

      Reply
      • Marius Enache says:

        You’re welcome Tania! I hope you’ll manage to solve the issues.

        Reply
  15. Tania says:

    hi,

    i just got the Nabia theme…and for some reason, the links to my Twitter page, and instagram page are not working. Any suggestions? the other social page links work fine. Also, any way to remove the blog page or “category” page from the home page?

    thank you!

    Reply
    • Marius Enache says:

      Hi Tania,

      – Do you refer to the links to Twitter/Instagram page from the sidebar widget?

      – I cannot figure out what “blog page/category” you want to remove from the home page. Do you have a live site? I think I could make me a better idea on what you want to achieve if I see your site.

      Reply
      • Tania says:

        hi!

        yes–referring to the side bar social media widget…all the other ones work, but i get errors for the Twitter and Instagram.

        -i figured out the blog/page removing thing! 🙂

        -but now i can’t get it to use my gallery pics for the carousel. When i pick “category”…it only gives me one of my pages as an option…i thought we could choose it by menu? or is there another way to get the pics on to the carousel?

        Thank you!

        Reply
        • Tania says:

          ps

          i tried to look for the CSS for this:

          i would like to delete it all together…where do i find it?

          Reply
        • Marius Enache says:

          The links to Twitter and Instagram seem to be working fine on my testing server.
          What kind of errors are you getting?

          When you want to display the posts from a specific category in the carousel, you need to set “Display in featured carousel” to “Category” and to choose one of your existing post categories (only categories that have at least one post will be displayed).

          Make sure your posts are assigned to that specific category if you want to be displayed in carousel.

          Are you refering to the CSS code to hide the sharing buttons?

          Reply
          • Tania says:

            hi,

            all the social links work now! not sure how…but that’s good!

            —i guess i am not getting how to work the “category” aspect of it. I thought the carousel was like a pictures/posts display. I will try to play with it a bit more, as I’m not sure how to add more pages/post to “category” to start with.

            – i was looking to get rid of the “menu” links that show up in the footer section. I used a coding selector to find what the CSS is for it, but can’t find the actual code when i go to edit the theme.

            Thank you for all you help so far!

  16. Yuliya says:

    Hello, Marius! I am trying to make Nabia theme to the web site of travel agency where I work, but have some problems. 1) When I am putting pictures to the main page, I want text would be arround picture, but it goes up or down picture. How may I change it?
    2) Also I can not find in the options how may I change size of the lettes in the title
    I hope for you help. Thank you very much!

    Reply
    • Marius Enache says:

      Hi Yuliya!
      Sorry that took me so long to reply.
      I was kinda busy in the last few days.

      1) To make the text go arround image put the following code inside the “style.css” file.

      .alignright {
      float:right;
      }
      .alignleft {
      float:left;
      }

      2) If you refer to the size of the site title, there is no option for now to increase its font size from the theme options.
      However, you can change it with css.

      Open “style.css” file with any text editor, press CTRL+F, then search for “.site-title”.
      You should find the following lines:

      .site-title {
      font-size: 24px;
      font-weight: 700;
      margin-top: 55px;
      }

      To increase the title size, change the “24px” value to a higher number.

      If you want to increase the size of the description, search for: “.site-description”

      You should see:

      .site-description {
      font-size: 20px;
      margin-top: 10px;
      color: #fff;
      }

      Again, increase the value for the “font-size” to a higher number.

      Make sure you save the style.css file after you make those changes.

      I hope this helps you.

      Reply
      • Yuliya says:

        thank you very much! You helped a lot! Now everything works!

        Reply
  17. Goran says:

    Hi,
    when I change color in customizer and save changes, color is in customizer changed, but site is unchanged.

    Reply
    • Marius Enache says:

      Hi! Are you using any caching plugins or a content delivery network (CDN)?

      Reply
      • Goran says:

        No…

        Reply
        • Goran says:

          Solved…Change Color schemes to Custom….
          🙂

          Reply
          • Marius Enache says:

            Oh, I forgot to ask you about that. 🙂
            Glad you managed to solve the problem.

  18. Goran says:

    Hi,
    i have problem with changing colors in customizer…When I change color, changes are made in customizer, but no in site?

    tnx

    Reply
  19. Gabriel says:

    Hello, im using this nabia theme but i’m having a problem with the titles, the words of the title are being cutted wrongly, can you help me with that?
    Where can i configure the size of the title?
    Thank you

    Reply
    • Marius Enache says:

      Hi Gabriel,

      Can you post the URL of your site?

      Reply
  20. tony says:

    Hi, looking to increase the width of the sidebar on the right. Or even increase the width of the entire content area. Is there an easy way to do this? Thanks, love your theme.

    Reply
    • Marius Enache says:

      Glad you like it Tony.

      The layout is based on Bootstrap 3 grid system.

      To edit the content and sidebar width, you need to edit the bootstrap HTML classes.
      However, if you want to enlarge the content area you will need to make the sidebars smaller and if you use the bootstrap default classes width, you will end up with very small sidebars.

      So, in order to give a custom width to columns, you would need to set a custom width for Bootstrap columns or to change the number of grid columns from 12 to a higher value.

      You can find a useful topic here on how to achieve that.

      Reply

Got something to say? Join the discussion.

Your email address will not be published. The fields marked with * are required

Connect With Me